← nyxcore-systems
7 min read

A Day in the Dev Life: Shipping UX, AI Personas, and a Todo-to-Action Supercharger

Dive into a marathon development session where we tackled everything from critical bug fixes and PWA enhancements to introducing powerful project reporting, an automated todo importer, and a sleek new AI system heartbeat display. Learn from our challenges and celebrate the wins of a truly multidisciplinary sprint.

developmentfrontendbackenduxreactnextjstypescriptpostgresqltrpcaiproductivitypwa

It was one of those sessions – the kind where the clock blurs, the coffee flows, and the codebase transforms under your fingertips. What started around 4 AM UTC on February 26th turned into a multi-feature blitz, touching every corner of our application. The goal was ambitious: deliver significant UX improvements, introduce powerful new productivity tools, and solidify our core infrastructure. By the time the dust settled, we had shipped a release packed with value.

Let's take a tour through what made it into this latest push.

Powering Up Our Platform: A Feature Deep Dive

This session was all about breadth and depth. We focused on enhancing existing experiences, introducing new workflows, and polishing the overall feel of the application.

Elevating Our AI Personas

Our AI personas are at the heart of many features, and this session gave them some much-needed love:

  • Custom NyxCore Portrait: NyxCore, our flagship persona, now boasts a unique profile picture, nyx-persona-profile-pic.png, adding a distinct visual identity within the application.
  • Persona Specializations: We've backfilled our database with detailed specializations, categories, and traits for all 9 personas. For instance, Sasha now shines in "System Design," "Scalability," and "Clean Architecture," while Noor specializes in "Vulnerability Analysis" and "OWASP." This richer metadata paves the way for more intelligent persona selection and interaction.
  • Smarter Persona Comparisons: When comparing workflows, the persona selection buttons now show not just the persona's name, but also their top two specializations in a dimmed, smaller font. This simple flex-col layout change provides immediate context, helping users choose the best AI for their task at a glance.

Streamlining Project Management and Reporting

Projects are central to organizing work, and we've made them even more capable:

  • Project Selector for New Workflows: Creating a new workflow is now seamlessly integrated into project management. A new <select> dropdown in workflows/new/page.tsx allows users to assign a projectId right from the start, ensuring workflows are organized from conception.
  • Introducing Project Reports: A major new addition is the "Reports" tab within projects/[id]/page.tsx. Marked by a BarChart2 icon, this tab lists all completed project workflows along with key stats. The "Generate Report" button opens a ReportGeneratorModal, laying the groundwork for powerful analytical capabilities.

From "Todo" to "Done": The Automated Importer

One of the most exciting new features tackles a common developer pain point: turning raw ideas and todos into actionable tasks within the system.

  • The Todo Importer Service: We built a robust backend service (src/server/services/todo-importer.ts) designed to parse structured markdown files from a todo/ directory. It intelligently extracts ### N. Title headings, determines "Type" (e.g., Bug, Feature), "Priority" (P0/P1/P2), "Prompt Essence," and a detailed description.
  • Action Points Integration: A new importFromTodo mutation in src/server/trpc/routers/action-points.ts takes these parsed todos, deduplicates them by title, marks them as isAutoDetected: true, and appends their "Prompt Essence." We also added a todoFiles query to list available todo files.
  • User-Friendly Import: On the ActionPointsTab within projects/[id]/page.tsx, you'll now find an "Import todo/" button. This button is available both in the empty state and the actions bar, making it incredibly easy to bring your backlog directly into your projects.
  • A Fresh Backlog: To kick things off, we even created an initial todo/backlog-2026-02-26.md with 15 structured items, ready for testing the new importer.

UI/UX Polish: Visual Feedback and App Presence

Small details often make a big difference in user experience:

  • Sidebar Heartbeat Relayout: The system heartbeat, a subtle indicator of backend activity, has been elegantly integrated inline with the NYX CORE logo in sidebar.tsx. Using justify-between, it's now right-aligned, creating a more compact and balanced layout: NYX CORE .... ▸ ● ||||| ▸ 2. Crucially, we added animated token flow direction arrows (▸) that subtly appear and disappear when processes are active, providing intuitive visual feedback without clutter.
  • Full PWA Icon Support: We ensured our application feels like a native experience by creating and adding public/favicon.svg, public/favicon.ico (32px), public/icons/icon-192.png, and public/icons/icon-512.png. These are now properly referenced in src/app/layout.tsx metadata, providing crisp icons across all devices and PWA installations.

Navigating the Minefield: Lessons Learned

Even in a productive session, challenges inevitably arise. Tackling them head-on and understanding the root cause is crucial for robust development. Here are a few "aha!" moments from this sprint:

1. Next.js Middleware and Image Optimization

  • The Problem: We attempted to use next/image for persona portraits stored in public/images/personas/. However, the images consistently failed to load with a 400 "not a valid image" error.
  • What We Tried: Initially, we suspected image corruption or incorrect paths.
  • Why It Failed: The issue stemmed from our authentication middleware (src/middleware.ts). It was intercepting internal next/image optimization requests for assets in public/ and, because these requests didn't carry auth tokens, redirecting them to /login with a 307 status. The image optimizer then received an HTML login page instead of an image, hence the "not a valid image" error.
  • The Fix: We explicitly added images/ to our middleware matcher exclusion list. This ensures that requests for static assets within public/images/ bypass the authentication check, allowing next/image to optimize and serve them correctly.
    • Lesson: Always remember that next/image's internal optimizer makes requests that might be caught by global middleware. Public assets often need specific exclusions. Any new public/ subdirectories containing assets that next/image might process will need similar treatment.

2. Ambiguous SQL Column References

  • The Problem: When writing a raw SQL query involving a JOIN between workflow_steps and workflows, we encountered a PostgreSQL 42702: column reference "output" is ambiguous error.
  • What We Tried: Initially, we used output and digest directly in our SELECT clause, assuming the query planner might infer context.
  • Why It Failed: Both the workflow_steps table (aliased as ws) and the workflows table (aliased as w) contained columns named output and digest. Without specifying which table's column we intended, PostgreSQL couldn't resolve the ambiguity.
  • The Fix: We qualified the ambiguous column references with their respective table aliases: ws.output and ws.digest.
    • Lesson: When performing JOIN operations, especially with tables that might share column names, always qualify your column references with table aliases to prevent ambiguity and ensure precise data retrieval.

3. Nested Interactive Elements and Hydration Errors

  • The Problem: We had implemented an expand/collapse feature within an "alternatives card," using a <button> element inside another outer <button>. This led to a React hydration warning: "button cannot be descendant of button."
  • What We Tried: Our initial approach was to use a button for any interactive element, which is semantically correct in isolation.
  • Why It Failed: HTML specifications strictly forbid nesting interactive elements like <button> or <a> inside another <button>. Doing so creates an invalid DOM structure and can lead to accessibility issues and unpredictable behavior across browsers, which React correctly warns about during hydration.
  • The Fix: We refactored the inner expand/collapse <button> to a <span role="button" tabIndex={0}>. The role="button" attribute semantically identifies the <span> as a button for assistive technologies, while tabIndex={0} makes it focusable via keyboard, preserving accessibility without violating HTML nesting rules.
    • Lesson: Pay close attention to HTML semantic rules, especially regarding nested interactive elements. When a true button is not allowed, using a <span> or <div> with appropriate ARIA roles and tabIndex can achieve the desired interactivity and accessibility.

What's Next?

With a significant chunk of features shipped, our immediate focus shifts to ensuring stability and preparing for the next wave of enhancements:

  1. Test Todo Import: The first priority is to thoroughly test the new todo importer – verify all 15 items from backlog-2026-02-26.md are correctly imported into a project's Actions tab.
  2. Comprehensive QA: A full quality assurance pass across all new features and bug fixes is essential to catch any regressions or edge cases.
  3. RLS for Project Notes: Implementing Row-Level Security policies for the project_notes table is crucial for data privacy and access control.
  4. Cleanup & Maintenance: A quick pass to clean up .gitignore from temporary log files and build artifacts.
  5. safeEnqueue Audit: A security and reliability audit of our safeEnqueue implementation for workflows, discussions, and code-analysis SSE endpoints.

This session was a testament to the power of focused, multi-disciplinary development. From backend services to intricate frontend UX, we pushed the boundaries and