Introduction
When an application experiences an incident, engineers need to understand what is happening, review relevant information, and decide what to investigate next.
During an incident, information can be spread across dashboards, logs, historical reports, and troubleshooting documentation. An interface that makes this information difficult to navigate can add friction to an already demanding investigation process.
This was one of the challenges behind RecallOps, a memory-first AI incident recovery assistant developed by our team.
My contributions focused on frontend development, including React components, the incident dashboard and incident list, incident intake forms, analysis results and evidence display, frontend integration with FastAPI, styling, and workflow testing.
In this article, I share the frontend perspective of RecallOps and discuss how the user interface connects incident information, backend analysis, and historical evidence in a single workflow.
1. Designing an Incident-Focused Dashboard
The dashboard is an important entry point for an incident investigation application.
Engineers need to be able to identify existing incidents, understand their basic details, and open an incident to examine it further.
In RecallOps, the dashboard and incident list provide a central place to view incidents and navigate into their details.
The interface is built using React, with Vite supporting the frontend development workflow and Tailwind CSS used for styling.
Working on the dashboard and incident list involved contributing to the presentation of incident information and the navigation between different parts of the application.
The broader design goal is to keep the incident investigation workflow understandable, rather than requiring users to navigate through unrelated screens to find the information they need.
A useful incident interface should make it clear which incident is being reviewed and provide a straightforward path from the incident list to its details and analysis.
2. Building Incident Intake Forms
An investigation begins with an incident being reported.
RecallOps includes an incident intake workflow where an engineer can provide information such as the incident title, affected service, severity, and description.
The frontend provides forms and modal-based interactions for submitting this information.
From a user experience perspective, incident intake needs to collect enough context for the backend to process the incident while keeping the submission process straightforward.
For example, the affected service and incident description help provide context for the investigation. The severity field gives the incident a level of urgency within the application's workflow.
The frontend work included designing incident intake forms and modals and connecting these interactions with the application's incident workflow.
This highlighted how important form design is in engineering tools. A form is not just a collection of input fields; it is the point where a user's understanding of an incident enters the system.
3. Connecting the Frontend with FastAPI
A frontend dashboard becomes useful when it can communicate with the backend and display information returned by the application.
RecallOps uses FastAPI and Python for its backend, while the frontend is developed with React.
My contributions included implementing frontend API integration with FastAPI.
This connection supports the application's incident-related workflows, including retrieving incident information, submitting incidents, and requesting analysis.
At a high level, the interaction works as follows:
- An engineer submits incident information through the frontend.
- The frontend sends the relevant request to the backend API.
- The backend processes the request and interacts with the application's data and memory services where required.
- The frontend receives the response and presents the resulting incident information or analysis.
This separation allows the user interface and backend services to handle different responsibilities.
The frontend focuses on user interaction and presentation, while the backend handles application logic, incident records, and communication with Hindsight Cloud.
Working with this integration provided practical experience with connecting React components to backend APIs and displaying information returned by a separate service.
4. Presenting Analysis Results and Evidence
One of the important parts of RecallOps is its incident analysis interface.
The application can retrieve historical memories through Hindsight and use them to support investigation suggestions.
However, displaying a suggestion without its context can be misleading.
A memory from a previous incident does not necessarily establish the cause of a new incident. Two services may experience similar symptoms while having different underlying problems.
The frontend therefore needs to communicate not only the content of an investigation suggestion, but also its relationship to the retrieved evidence.
My work included contributing to the analysis results and evidence display.
RecallOps distinguishes between direct historical evidence, cross-service references, and general references. The interface includes evidence information and labels that help communicate these distinctions.
For example, a historical resolution associated with a payment gateway should not automatically be presented as a verified fix for an inventory API incident.
A cross-service reference may still provide an investigation lead, but the engineer needs to understand that it has not been verified for the affected service.
From a frontend perspective, this is an important design consideration: visual presentation should help users understand uncertainty instead of making every suggestion appear equally authoritative.
Clear labels, evidence references, and warnings can help engineers interpret retrieved information in context.
5. Styling and User Experience
RecallOps uses Tailwind CSS for its frontend styling.
My contributions included working on styling and responsive layout, as well as testing frontend workflows and the user experience.
In an incident investigation tool, visual consistency and understandable navigation are important because users need to move between incidents, analysis results, and supporting evidence.
The interface brings together incident information, analysis output, and historical references. Styling helps distinguish different kinds of information and makes the application easier to navigate.
Workflow testing also provides an opportunity to examine how the application behaves from the user's perspective.
For example, the incident intake process, opening an incident, requesting analysis, and reviewing evidence form a connected user journey. These steps need to work together for the application to be useful.
Testing these workflows helped examine the frontend as part of the overall application rather than treating individual components as isolated pieces.
The experience reinforced that frontend development involves more than making a page look attractive. It also requires connecting user interactions to application behavior and presenting information in a way that users can understand.
6. Technology Stack and Architecture
The frontend and backend of RecallOps use the following technologies:
- React: Building the frontend interface and reusable components.
- Vite: Supporting the frontend development and build workflow.
- Tailwind CSS: Styling the interface and supporting layout.
- FastAPI: Providing backend APIs for the application.
- Python: Implementing backend application logic.
- SQLite: Storing local incident and outcome records.
- Hindsight Cloud: Providing persistent memory for historical incident information.
The frontend is one part of a larger system. Its role is to provide an interface through which engineers can interact with incidents, request analysis, and review evidence returned by the backend.
This project helped me gain practical experience with frontend and backend integration and understand how user interface decisions relate to the behavior of a full-stack application.
7. Lessons Learned and Future Improvements
Working on RecallOps reinforced several lessons about frontend engineering.
First, the user interface is part of the application's reliability. A useful backend response is less helpful if the frontend presents it without context or makes it difficult to interpret.
Second, evidence needs to be visible and understandable. When an application presents historical information, users should be able to distinguish the source of a suggestion from the suggestion itself.
Third, frontend and backend development need to work together. API integration connects user actions with application logic and determines how information moves through the system.
Fourth, testing complete workflows matters. Testing the incident intake, dashboard, analysis, and evidence display as a connected journey helps identify issues that may not appear when components are considered individually.
RecallOps is a working prototype, and there is room for further improvement. Future work could include more extensive usability testing, broader responsive-layout evaluation, and additional feedback from engineers using the application in realistic incident investigation scenarios.
These improvements would help evaluate how well the interface supports engineers and where the workflow could be made clearer.
Conclusion
RecallOps explores how persistent memory can help engineering teams reuse historical troubleshooting knowledge during incident investigation.
From the frontend perspective, the project brought together incident dashboards, intake forms, API integration, analysis results, and evidence display into a connected user experience.
Working on these areas helped me understand how frontend engineering contributes to the usability and transparency of AI-assisted developer tools.
The project also reinforced an important principle: an incident investigation interface should help engineers understand information and make informed decisions, rather than treating an AI-generated suggestion as an automatically verified solution.
Project: RecallOps — A Memory-First AI Incident Recovery Assistant
Source Code: https://github.com/Karunya0612/RecallOps
Hindsight GitHub: https://github.com/vectorize-io/hindsight
Hindsight Documentation: https://hindsight.vectorize.io/
Vectorize: https://vectorize.io/
Top comments (0)