← nyxcore-systems
4 min read

From Code to Clarity: Enhancing Avatars and Activity Insights

A deep dive into our recent development sprint, covering auto-generated persona avatars and a more flexible activity pulse chart, complete with lessons learned.

frontendbackenduxdata-visualizationtypescriptnextjstrpcdevelopment-process

Every development session is a journey, often a focused sprint to bring new features to life or refine existing ones. Today, I'm pulling back the curtain on a recent session that tackled two key areas: making our AI personas feel more 'real' with auto-generated avatars, and giving users more control over their project activity insights. Think of this as a "Letter to Myself" – a snapshot of decisions, challenges, and triumphs on the path to a better product.

Bringing Our Personas to Life: Auto-Generated Avatars

Our platform relies heavily on intelligent personas to assist users. But what's a persona without a face? Previously, some personas lacked a visual identity, leading to a less engaging user experience. Our goal was clear: ensure every persona, whether built-in or tenant-specific, has a unique and fitting avatar.

The Technical Approach

The core of this feature involved creating a robust avatar generation mechanism:

  1. Server-Side Generation: We introduced a new generateMissingAvatars mutation within our src/server/trpc/routers/personas.ts. This mutation intelligently scans for personas with imageUrl: null.
  2. Contextual Avatars: Instead of generic images, we leverage the persona's existing data – their specializations and systemPrompt – to inform the createAvatar() function. This ensures the generated avatar is conceptually aligned with the persona's role and expertise.
  3. Efficient Updates: Once generated, the imageUrl is saved to the database using updateMany, allowing for bulk updates and efficient persistence.

Seamless User Experience

Integrating this into the front end was crucial for a smooth experience:

  • Ubiquitous Avatars: We removed conditional rendering ({persona.imageUrl && ...}) in src/app/(dashboard)/dashboard/personas/page.tsx and other components, ensuring an avatar circle is always rendered. For initial load or in cases where generation is pending, we added a fallback to display the persona's initial letter.
  • On-Demand Generation: To make the process invisible to the user, we implemented an useEffect hook with a useRef guard on the main personas page. This automatically triggers generateMissingAvatars on page load, ensuring that any newly created or previously un-imaged personas get their visual identity.
  • Local Image Handling: Since these avatars are generated locally, we added the unoptimized prop to Image components across various files (src/app/(dashboard)/dashboard/personas/page.tsx, src/app/(dashboard)/dashboard/personas/[id]/page.tsx, src/components/shared/persona-picker.tsx, src/components/dashboard/analytics/persona-overview-panel.tsx). This prevents Next.js's image optimization service from trying to process these dynamically generated, local assets, which would be inefficient and unnecessary.
  • Regeneration: For those who want a fresh look, the persona detail page (src/app/(dashboard)/dashboard/personas/[id]/page.tsx) now directly uses the new generateAvatar mutation via a handleRegenerateAvatar() function, replacing an older shuffling mechanism.

The result? A more visually consistent and engaging dashboard where every AI colleague has a face to match their function.

Gaining Granular Insights: The Activity Pulse Chart

Our Executive Intelligence Dashboard features an "Activity Pulse" chart, a vital tool for understanding project momentum. Previously, this chart was limited to a static 30-day view. Our goal was to empower users with more control, allowing them to focus on specific timeframes.

Expanding Data and Flexibility

The core improvements here revolved around data access and client-side presentation:

  1. Increased Server Data: First, we expanded the activity timeline data fetch from 30 to 90 days in src/server/trpc/routers/projects.ts. This provides the raw data needed for broader views.
  2. Client-Side Filtering: The heavy lifting for user interaction happens in src/components/project/overview/activity-pulse.tsx. We completely rewrote this component to include a 7D / 30D / 90D button group.
  3. Performance with useMemo: To ensure a snappy user experience, we implemented client-side filtering using useMemo. This memoizes the filtered data, preventing unnecessary re-calculations when the date range changes, keeping the chart responsive.
  4. Dynamic Title: The chart's title now dynamically updates (e.g., "Activity Pulse — Last 7D/30D/90D") to clearly reflect the currently selected timeframe.
  5. Default View: We set the default range to "7D", providing an immediate, focused view upon loading the dashboard.

This enhancement significantly improves the utility of the Activity Pulse, allowing users to quickly zoom in on recent activity or take a broader look at quarterly trends.

Lessons Learned: The "1D" Conundrum

Not every idea makes it to production without a hitch. During the Activity Pulse implementation, we initially considered adding a "1D" (1 day) option.

  • The Problem: When we tested the "1D" view, the chart rendered a single, lonely data point. A line chart, by definition, connects multiple points. With only one point, there's no line, and the chart loses its visual meaning and utility.
  • The Workaround: We decided to remove the "1D" option and default to "7D", which consistently provides enough data points for a meaningful line chart.
  • Future Considerations: This experience highlighted a critical insight: our server currently returns daily granularity for activity data. To truly support a useful "1D" view, we would need to implement hourly bucketing on the server-side. This is a valuable consideration for future iterations, allowing for intra-day chart views when even finer granularity is required.

This challenge served as a good reminder that data visualization isn't just about showing data, but showing it in a way that is meaningful and actionable.

What's Next?

With these enhancements deployed, our immediate next step is to commit these changes and then shift our focus to an exciting new area: the enhanced notes enrichment pipeline. This ambitious project aims to integrate project and global wisdom, create actionable insights, and build a sophisticated workflow for intelligent information processing. The journey continues!