roadmap/update-feature-roadmap

apps/web/content/roadmap/api.mdx

@@ -0,0 +1,8 @@
+---
+title: API and Webhooks
+status: todo
+created: "2025-01-15"
+labels: ["feature", "integrations"]
+---
+
+API and webhooks for Hyprnote. Pull out meeting content through an API for your apps, or use MCP to bring meeting context into other tools. Webhooks can trigger actions like pre-meeting research 5 minutes before, or automatically push notes to Affinity or your CRM right after a meeting ends.

apps/web/content/roadmap/bot.mdx

@@ -0,0 +1,8 @@
+---
+title: Digital Clone / Bot
+status: todo
+created: "2025-01-15"
+labels: ["feature", "ai"]
+---
+
+Deploy a digital clone of yourself to meetings you can't attend. Double-booked or just need the information? Send your bot to gather context and report back. Also lives in Slack - just @ mention Hyprnote to ask questions about your meetings.

apps/web/content/roadmap/daily-notes.mdx

@@ -0,0 +1,8 @@
+---
+title: Daily Notes
+status: todo
+created: "2025-01-15"
+labels: ["feature", "productivity"]
+---
+
+A timeline view of your notes in reverse chronological order, like a Facebook timeline. Each day shows a collection of what you need to do and a summary of what you've done. Aggregates emails, tasks from integrated task management software, and meeting notes into one robust view. Track your progress as items get checked off throughout the day.

apps/web/content/roadmap/extensions.mdx

@@ -0,0 +1,8 @@
+---
+title: Extensions
+status: todo
+created: "2025-01-15"
+labels: ["feature", "customization"]
+---
+
+Plugin and extension system for Hyprnote, similar to VS Code. Extensions can be anything from themes to customize the app's appearance, to specialized functionality for your workflow. For example, an investment analyst could install an extension to display charts directly within Hyprnote during meetings.

apps/web/content/roadmap/floating-panel.mdx

@@ -0,0 +1,8 @@
+---
+title: Floating Panel
+status: todo
+created: "2025-01-15"
+labels: ["feature", "ui"]
+---
+
+A compact, always-on-top translucent panel that automatically appears when meetings start (can be disabled in settings). Designed to stay out of your way during meetings - no vivid notepad blocking participants or shared materials. Customize the transparency and blur to your preference. Navigate through four tabs: Notepad for quick notes, Transcript for live transcription, Insights for real-time summaries of the last 5 minutes plus sentiment analysis of speakers (are they happy, uncertain, etc.), and Chat to ask questions and get answers in real time.

apps/web/content/roadmap/hyprmail.mdx

@@ -0,0 +1,8 @@
+---
+title: Hyprmail
+status: todo
+created: "2025-01-15"
+labels: ["product", "email"]
+---
+
+Our next software product - an executive assistant for your inbox. Hyprmail sorts your emails, and you can CC Hyprnote directly into email threads to handle scheduling. It reads through your emails, reminds you of things that need to be done, and automatically extracts tasks for you.

apps/web/content/roadmap/hyprnote-hardware.mdx

@@ -0,0 +1,8 @@
+---
+title: Hyprnote Hardware
+status: todo
+created: "2025-01-15"
+labels: ["product", "hardware"]
+---
+
+Dedicated hardware for ambient listening that's non-intrusive. A phone or voice recorder on the desk signals to others that the conversation might be recorded, making it unnatural. Our vision: an e-ink tablet like Kindle or Remarkable that you write on, with a built-in mic that listens to conversations. Syncs via WiFi or Bluetooth to your phone and optionally to the cloud. Also exploring a pendant, ring, and pen form factors - all designed to blend naturally into your environment.

apps/web/content/roadmap/memory.mdx

@@ -0,0 +1,8 @@
+---
+title: Memory
+status: todo
+created: "2025-01-15"
+labels: ["feature", "ai"]
+---
+
+As Hyprnote gains more context, it builds a deep understanding of your daily and work life that you can use across other applications. We believe plugging in random information from apps doesn't help much - what matters is concrete, relevant context tied to your everyday life. Capturing all your conversations and interactions with people you meet is crucial for this.

apps/web/content/roadmap/mobile.mdx

@@ -0,0 +1,8 @@
+---
+title: Mobile
+status: todo
+created: "2025-01-15"
+labels: ["feature", "platform"]
+---
+
+Native mobile apps for iOS and Android - expanding modalities, not just platforms. Desktop is for virtual meetings at your computer, but mobile covers different situations: attending conferences, webinars, or meeting someone in person. Similar use case to smartwatches, but with access to much more powerful hardware.

apps/web/content/roadmap/smartwatch.mdx

@@ -0,0 +1,8 @@
+---
+title: Smartwatch
+status: todo
+created: "2025-01-15"
+labels: ["feature", "wearable"]
+---
+
+Integrating with existing smartwatch ecosystems - Apple Watch, Galaxy Watch, Huawei, and others. Unlike our custom hardware, we don't have to build wearables ourselves. Smartwatches are even less intrusive than dedicated devices because people wear them every day. Even though they can record, it feels natural, and they're in the perfect position to capture audio without being obtrusive.

apps/web/content/roadmap/windows.mdx

@@ -0,0 +1,8 @@
+---
+title: Windows and Linux
+status: todo
+created: "2025-01-15"
+labels: ["feature", "platform"]
+---
+
+Expanding from macOS to Windows and Linux. Native desktop applications for all major operating systems.

apps/web/content/roadmap/workflows.mdx

@@ -0,0 +1,8 @@
+---
+title: Workflows
+status: todo
+created: "2025-01-15"
+labels: ["feature", "automation"]
+---
+
+Built-in automation like Zapier for Hyprnote. While webhooks let developers run scripts after certain events, workflows provide a visual, no-code way to automate actions directly within the app.

apps/web/src/routes/_view/roadmap/$slug.tsx

@@ -54,34 +54,29 @@ function Component() {
     done: {
       label: "Done",
       icon: "mdi:check-circle",
-      iconColor: "text-green-600",
-      bgColor: "bg-green-50",
-      borderColor: "border-green-200",
+      className: "bg-linear-to-t from-green-200 to-green-100 text-green-900",
     },
     "in-progress": {
       label: "In Progress",
       icon: "mdi:progress-clock",
-      iconColor: "text-blue-600",
-      bgColor: "bg-blue-50",
-      borderColor: "border-blue-200",
+      className: "bg-linear-to-b from-[#03BCF1] to-[#127FE5] text-white",
     },
     todo: {
       label: "To Do",
       icon: "mdi:calendar-clock",
-      iconColor: "text-neutral-400",
-      bgColor: "bg-neutral-50",
-      borderColor: "border-neutral-200",
+      className:
+        "bg-linear-to-t from-neutral-200 to-neutral-100 text-neutral-900",
     },
   };
 
   const status = statusConfig[item.status];
 
   return (
     <div
-      className="bg-linear-to-b from-white via-stone-50/20 to-white min-h-screen"
+      className="bg-linear-to-b from-white via-stone-50/20 to-white"
       style={{ backgroundImage: "url(/patterns/dots.svg)" }}
     >
-      <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-16 border-x border-neutral-100 bg-white">
+      <div className="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-8 border-x border-neutral-100 bg-white">
         <Link
           to="/roadmap"
           className="inline-flex items-center gap-2 text-sm text-neutral-600 hover:text-stone-600 transition-colors mb-8 font-serif"
@@ -92,62 +87,58 @@ function Component() {
 
         <article>
           <header className="mb-8">
-            <div className="flex items-center gap-3 mb-4">
-              <div
-                className={cn([
-                  "inline-flex items-center gap-2 px-3 py-1.5 rounded-full border",
-                  status.bgColor,
-                  status.borderColor,
-                ])}
-              >
-                <Icon
-                  icon={status.icon}
-                  className={cn(["text-lg", status.iconColor])}
-                />
-                <span className="text-sm font-medium text-stone-600">
-                  {status.label}
-                </span>
-              </div>
-            </div>
-
             <h1 className="text-3xl sm:text-4xl lg:text-5xl font-serif text-stone-600 mb-4">
               {item.title}
             </h1>
 
-            {item.labels && item.labels.length > 0 && (
-              <div className="flex flex-wrap gap-2 mb-4">
-                {item.labels.map((label) => (
+            <div className="flex items-center gap-2 mb-4 flex-wrap">
+              <span
+                className={cn([
+                  "inline-flex items-center gap-1 px-2 py-0.5 text-xs font-medium rounded-full",
+                  status.className,
+                ])}
+              >
+                <Icon icon={status.icon} className="text-xs" />
+                {status.label}
+              </span>
+
+              {item.labels &&
+                item.labels.length > 0 &&
+                item.labels.map((label) => (
                   <span
                     key={label}
-                    className="text-xs px-2.5 py-1 rounded-full bg-neutral-100 text-neutral-600"
+                    className="inline-flex items-center px-2 py-0.5 text-xs font-medium bg-linear-to-t from-neutral-200 to-neutral-100 text-neutral-900 rounded-full capitalize"
                   >
                     {label}
                   </span>
                 ))}
-              </div>
-            )}
+            </div>
 
-            <div className="flex items-center gap-4 text-sm text-neutral-500">
-              <time dateTime={item.created}>
-                Created{" "}
-                {new Date(item.created).toLocaleDateString("en-US", {
-                  year: "numeric",
-                  month: "long",
-                  day: "numeric",
-                })}
-              </time>
-              {item.updated && item.updated !== item.created && (
-                <>
-                  <span>·</span>
-                  <span>
-                    Updated{" "}
-                    {new Date(item.updated).toLocaleDateString("en-US", {
-                      year: "numeric",
-                      month: "long",
-                      day: "numeric",
-                    })}
-                  </span>
-                </>
+            <div className="text-xs text-neutral-500 font-mono">
+              {item.updated && item.updated !== item.created ? (
+                <span>
+                  Updated{" "}
+                  {new Date(item.updated).toLocaleDateString("en-US", {
+                    year: "numeric",
+                    month: "short",
+                    day: "numeric",
+                  })}{" "}
+                  / Created{" "}
+                  {new Date(item.created).toLocaleDateString("en-US", {
+                    year: "numeric",
+                    month: "short",
+                    day: "numeric",
+                  })}
+                </span>
+              ) : (
+                <time dateTime={item.created}>
+                  Created{" "}
+                  {new Date(item.created).toLocaleDateString("en-US", {
+                    year: "numeric",
+                    month: "short",
+                    day: "numeric",
+                  })}
+                </time>
               )}
             </div>
           </header>
@@ -166,29 +157,23 @@ function Component() {
             />
           </div>
 
-          {item.githubIssues && item.githubIssues.length > 0 && (
-            <div className="mt-12 pt-8 border-t border-neutral-100">
-              <h3 className="text-xl font-serif text-stone-600 mb-6">
-                Related GitHub Issues
-              </h3>
-              <div className="space-y-4">
+          <div className="mt-12 pt-8 border-t border-neutral-100">
+            <h3 className="text-xl font-serif text-stone-600 mb-6">
+              Related GitHub Issues
+            </h3>
+            {item.githubIssues && item.githubIssues.length > 0 ? (
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
                 {item.githubIssues.map((url) => (
                   <GitHubIssuePreview key={url} url={url} />
                 ))}
               </div>
-            </div>
-          )}
+            ) : (
+              <p className="text-neutral-400 text-sm">
+                No related GitHub issues yet
+              </p>
+            )}
+          </div>
         </article>
-
-        <footer className="mt-16 pt-8 border-t border-neutral-100">
-          <Link
-            to="/roadmap"
-            className="inline-flex items-center gap-2 text-neutral-600 hover:text-stone-600 transition-colors font-medium"
-          >
-            <span>←</span>
-            <span>Back to roadmap</span>
-          </Link>
-        </footer>
       </div>
     </div>
   );