@oneuptime/common 9.3.5 → 9.3.7

package/Server/API/AIAgentDataAPI.ts

@@ -458,10 +458,20 @@ export default class AIAgentDataAPI {
             );
           }
 
-          // Generate GitHub installation access token
+          /*
+           * Generate GitHub installation access token with write permissions
+           * Required for AI Agent to push branches and create pull requests
+           */
           const tokenData: GitHubInstallationToken =
             await GitHubUtil.getInstallationAccessToken(
               codeRepository.gitHubAppInstallationId,
+              {
+                permissions: {
+                  contents: "write", // Required for pushing branches
+                  pull_requests: "write", // Required for creating PRs
+                  metadata: "read", // Required for reading repository metadata
+                },
+              },
             );
 
           const repositoryUrl: string = `https://github.com/${codeRepository.organizationName}/${codeRepository.repositoryName}.git`;

package/Server/API/GitHubAPI.ts

@@ -11,6 +11,7 @@ import { DashboardClientUrl, GitHubAppName } from "../EnvironmentConfig";
 import ObjectID from "../../Types/ObjectID";
 import GitHubUtil, {
   GitHubRepository,
+  GitHubInstallationNotFoundError,
 } from "../Utils/CodeRepository/GitHub/GitHub";
 import CodeRepositoryService from "../Services/CodeRepositoryService";
 import ProjectService from "../Services/ProjectService";
@@ -181,9 +182,19 @@ export default class GitHubAPI {
       UserMiddleware.getUserMiddleware,
       async (req: ExpressRequest, res: ExpressResponse) => {
         try {
+          const projectId: string | undefined =
+            req.params["projectId"]?.toString();
           const installationId: string | undefined =
             req.params["installationId"]?.toString();
 
+          if (!projectId) {
+            return Response.sendErrorResponse(
+              req,
+              res,
+              new BadDataException("Project ID is required"),
+            );
+          }
+
           if (!installationId) {
             return Response.sendErrorResponse(
               req,
@@ -201,6 +212,40 @@ export default class GitHubAPI {
         } catch (error) {
           logger.error("GitHub List Repositories Error:");
           logger.error(error);
+
+          // Handle stale installation ID - clear it from the project and return specific error
+          if (error instanceof GitHubInstallationNotFoundError) {
+            const projectId: string | undefined =
+              req.params["projectId"]?.toString();
+
+            if (projectId) {
+              try {
+                // Clear the stale installation ID from the project
+                await ProjectService.updateOneById({
+                  id: new ObjectID(projectId),
+                  data: {
+                    gitHubAppInstallationId: null as unknown as string,
+                  },
+                  props: {
+                    isRoot: true,
+                  },
+                });
+
+                logger.info(
+                  `Cleared stale GitHub App installation ID from project ${projectId}`,
+                );
+              } catch (clearError) {
+                logger.error(
+                  "Failed to clear stale installation ID from project:",
+                );
+                logger.error(clearError);
+              }
+            }
+
+            // Return the specific error so the frontend knows to prompt reinstallation
+            return Response.sendErrorResponse(req, res, error);
+          }
+
           return Response.sendErrorResponse(
             req,
             res,
@@ -349,6 +394,63 @@ export default class GitHubAPI {
 
           logger.debug(`Received GitHub webhook event: ${event}`);
 
+          // Handle installation events - specifically when the app is uninstalled
+          if (event === "installation") {
+            const action: string | undefined = (req.body as JSONObject)?.[
+              "action"
+            ]?.toString();
+            const installationId: string | undefined = (
+              (req.body as JSONObject)?.["installation"] as JSONObject
+            )?.["id"]?.toString();
+
+            if (action === "deleted" && installationId) {
+              logger.info(
+                `GitHub App installation ${installationId} was deleted. Clearing from database...`,
+              );
+
+              try {
+                // Clear the installation ID from any projects that have it
+                await ProjectService.updateBy({
+                  query: {
+                    gitHubAppInstallationId: installationId,
+                  },
+                  data: {
+                    gitHubAppInstallationId: null as unknown as string,
+                  },
+                  limit: 1000,
+                  skip: 0,
+                  props: {
+                    isRoot: true,
+                  },
+                });
+
+                // Also clear from any code repositories that have this installation ID
+                await CodeRepositoryService.updateBy({
+                  query: {
+                    gitHubAppInstallationId: installationId,
+                  },
+                  data: {
+                    gitHubAppInstallationId: null as unknown as string,
+                  },
+                  limit: 10000,
+                  skip: 0,
+                  props: {
+                    isRoot: true,
+                  },
+                });
+
+                logger.info(
+                  `Successfully cleared GitHub App installation ${installationId} from database`,
+                );
+              } catch (clearError) {
+                logger.error(
+                  `Failed to clear GitHub App installation ${installationId} from database:`,
+                );
+                logger.error(clearError);
+              }
+            }
+          }
+
           /*
            * Handle different webhook events here
            * For now, just acknowledge receipt

package/Server/EnvironmentConfig.ts

@@ -397,6 +397,15 @@ export const StatusPageApiClientUrl: URL = new URL(
   new Route(StatusPageApiRoute.toString()),
 );
 
+/*
+ *Internal URL for server-to-server communication (uses internal Docker hostname)
+ *Note: The internal path is /api/status-page (not /status-page-api) because
+ * /status-page-api is the external route that Nginx rewrites to /api/status-page
+ */
+export const StatusPageApiInternalUrl: URL = URL.fromString(
+  AppApiClientUrl.toString(),
+).addRoute(new Route("/status-page"));
+
 export const DashboardClientUrl: URL = new URL(
   HttpProtocol,
   Host,

package/Server/Utils/CodeRepository/GitHub/GitHub.ts

@@ -18,6 +18,17 @@ import {
 import BadDataException from "../../../../Types/Exception/BadDataException";
 import * as crypto from "crypto";
 
+/**
+ * Error thrown when a GitHub App installation is no longer valid (e.g., uninstalled from GitHub)
+ */
+export class GitHubInstallationNotFoundError extends BadDataException {
+  public constructor() {
+    super(
+      "GitHub App installation not found. The app may have been uninstalled from GitHub. Please reconnect with GitHub to reinstall the app.",
+    );
+  }
+}
+
 export interface GitHubRepository {
   id: number;
   name: string;
@@ -335,11 +346,20 @@ export default class GitHubUtil extends HostedCodeRepository {
   /**
    * Gets an installation access token for a GitHub App installation
    * @param installationId - The GitHub App installation ID
+   * @param options - Optional configuration for the token
+   * @param options.permissions - Specific permissions to request for the token
    * @returns Installation token and expiration date
    */
   @CaptureSpan()
   public static async getInstallationAccessToken(
     installationId: string,
+    options?: {
+      permissions?: {
+        contents?: "read" | "write";
+        pull_requests?: "read" | "write";
+        metadata?: "read";
+      };
+    },
   ): Promise<GitHubInstallationToken> {
     const jwt: string = GitHubUtil.generateAppJWT();
 
@@ -347,10 +367,17 @@ export default class GitHubUtil extends HostedCodeRepository {
       `https://api.github.com/app/installations/${installationId}/access_tokens`,
     );
 
+    // Build request data with optional permissions
+    const requestData: JSONObject = {};
+
+    if (options?.permissions) {
+      requestData["permissions"] = options.permissions;
+    }
+
     const result: HTTPErrorResponse | HTTPResponse<JSONObject> = await API.post(
       {
         url: url,
-        data: {},
+        data: requestData,
         headers: {
           Authorization: `Bearer ${jwt}`,
           Accept: "application/vnd.github+json",
@@ -360,6 +387,31 @@ export default class GitHubUtil extends HostedCodeRepository {
     );
 
     if (result instanceof HTTPErrorResponse) {
+      // Check if this is a permission error and provide helpful message
+      const errorMessage: string =
+        (result.data as JSONObject)?.["message"]?.toString() || "";
+
+      // Check if the installation is not found (404) - this means the app was uninstalled from GitHub
+      if (result.statusCode === 404) {
+        logger.error(
+          `GitHub App installation not found (ID: ${installationId}). ` +
+            `The app may have been uninstalled from GitHub. User needs to reinstall the app.`,
+        );
+        throw new GitHubInstallationNotFoundError();
+      }
+
+      if (
+        errorMessage.includes("permissions") ||
+        result.statusCode === 403 ||
+        result.statusCode === 422
+      ) {
+        logger.error(
+          `GitHub App permission error: ${errorMessage}. ` +
+            `Please ensure the GitHub App is configured with the required permissions ` +
+            `(contents: write, pull_requests: write, metadata: read) in the GitHub App settings.`,
+        );
+      }
+
       throw result;
     }
 

package/Types/Icon/IconProp.ts

@@ -141,6 +141,9 @@ enum IconProp {
   ExclaimationCircle = "ExclaimationCircle",
   WhatsApp = "WhatsApp",
   Brain = "Brain",
+  FlowDiagram = "FlowDiagram",
+  GitHub = "GitHub",
+  Bug = "Bug",
 }
 
 export default IconProp;

package/UI/Components/Icon/Icon.tsx

@@ -692,6 +692,14 @@ const Icon: FunctionComponent<ComponentProps> = ({
         clipRule="evenodd"
       />,
     );
+  } else if (icon === IconProp.GitHub) {
+    return getSvgWrapper(
+      <path
+        fill="currentColor"
+        stroke="none"
+        d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"
+      />,
+    );
   } else if (icon === IconProp.ChevronRight) {
     return getSvgWrapper(
       <path
@@ -1298,6 +1306,30 @@ const Icon: FunctionComponent<ComponentProps> = ({
         d="M9.813 15.904L9 18.75l-.813-2.846a4.5 4.5 0 00-3.09-3.09L2.25 12l2.846-.813a4.5 4.5 0 003.09-3.09L9 5.25l.813 2.846a4.5 4.5 0 003.09 3.09L15.75 12l-2.846.813a4.5 4.5 0 00-3.09 3.09zM18.259 8.715L18 9.75l-.259-1.035a3.375 3.375 0 00-2.455-2.456L14.25 6l1.036-.259a3.375 3.375 0 002.455-2.456L18 2.25l.259 1.035a3.375 3.375 0 002.456 2.456L21.75 6l-1.035.259a3.375 3.375 0 00-2.456 2.456zM16.894 20.567L16.5 21.75l-.394-1.183a2.25 2.25 0 00-1.423-1.423L13.5 18.75l1.183-.394a2.25 2.25 0 001.423-1.423l.394-1.183.394 1.183a2.25 2.25 0 001.423 1.423l1.183.394-1.183.394a2.25 2.25 0 00-1.423 1.423z"
       />,
     );
+  } else if (icon === IconProp.FlowDiagram) {
+    // Flow diagram icon matching home page workflows - two boxes at top, one at bottom, connected
+    return getSvgWrapper(
+      <>
+        <rect x="3" y="3" width="6" height="4" rx="1" strokeWidth="1.5" />
+        <rect x="15" y="3" width="6" height="4" rx="1" strokeWidth="1.5" />
+        <rect x="9" y="17" width="6" height="4" rx="1" strokeWidth="1.5" />
+        <path
+          strokeLinecap="round"
+          d="M6 7v3a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V7M12 12v5"
+        />
+      </>,
+    );
+  } else if (icon === IconProp.Bug) {
+    // Bug icon for exceptions - matching home page
+    return getSvgWrapper(
+      <>
+        <ellipse cx="12" cy="14" rx="5" ry="6" />
+        <path
+          strokeLinecap="round"
+          d="M9 8.5C9 6.5 10.5 5 12 5s3 1.5 3 3.5M4 11l3 1m10-1 3 1M4 17l3-1m10 1 3-1M12 8v12M9 14h6"
+        />
+      </>,
+    );
   }
 
   return <></>;

package/UI/Components/Navbar/NavBar.tsx

@@ -29,6 +29,7 @@ export interface MoreMenuItem {
   description: string;
   route: Route;
   icon: IconProp;
+  iconColor?: string; // Tailwind color class like "bg-blue-500"
 }
 
 export interface ComponentProps {
@@ -277,7 +278,7 @@ const Navbar: FunctionComponent<ComponentProps> = (
               {isMoreMenuVisible &&
                 (props.moreMenuFooter ? (
                   <NavBarMenu footer={props.moreMenuFooter}>
-                    {props.moreMenuItems.map((item: any) => {
+                    {props.moreMenuItems.map((item: MoreMenuItem) => {
                       return (
                         <NavBarMenuItem
                           key={item.title}
@@ -285,6 +286,7 @@ const Navbar: FunctionComponent<ComponentProps> = (
                           description={item.description}
                           route={item.route}
                           icon={item.icon}
+                          iconColor={item.iconColor}
                           onClick={forceHideMoreMenu}
                         />
                       );
@@ -292,7 +294,7 @@ const Navbar: FunctionComponent<ComponentProps> = (
                   </NavBarMenu>
                 ) : (
                   <NavBarMenu>
-                    {props.moreMenuItems.map((item: any) => {
+                    {props.moreMenuItems.map((item: MoreMenuItem) => {
                       return (
                         <NavBarMenuItem
                           key={item.title}
@@ -300,6 +302,7 @@ const Navbar: FunctionComponent<ComponentProps> = (
                           description={item.description}
                           route={item.route}
                           icon={item.icon}
+                          iconColor={item.iconColor}
                           onClick={forceHideMoreMenu}
                         />
                       );

package/UI/Components/Navbar/NavBarMenu.tsx

@@ -1,7 +1,14 @@
 import Link from "../Link/Link";
+import Icon from "../Icon/Icon";
+import IconProp from "../../../Types/Icon/IconProp";
 import URL from "../../../Types/API/URL";
 import React, { FunctionComponent, ReactElement } from "react";
 
+export interface MenuSection {
+  title: string;
+  children: ReactElement | Array<ReactElement>;
+}
+
 export interface ComponentProps {
   children: ReactElement | Array<ReactElement>;
   footer?: {
@@ -11,7 +18,7 @@ export interface ComponentProps {
   };
 }
 
-const NavBarItem: FunctionComponent<ComponentProps> = (
+const NavBarMenu: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
   let children: Array<ReactElement>;
@@ -20,27 +27,54 @@ const NavBarItem: FunctionComponent<ComponentProps> = (
   } else {
     children = props.children;
   }
+
+  // Calculate number of columns based on items count
+  const itemCount: number = children.length;
+  const columnClass: string =
+    itemCount <= 4
+      ? "lg:grid-cols-2"
+      : itemCount <= 6
+        ? "lg:grid-cols-3"
+        : "lg:grid-cols-3";
+  const maxWidthClass: string =
+    itemCount <= 4
+      ? "lg:max-w-xl"
+      : itemCount <= 6
+        ? "lg:max-w-2xl"
+        : "lg:max-w-3xl";
+
   return (
-    <div className="absolute left-1/3 z-10 mt-10 w-screen max-w-md -translate-x-1/2 transform px-2 sm:px-0 lg:max-w-3xl">
-      <div className="overflow-hidden rounded-lg shadow-lg ring-1 ring-black ring-opacity-5">
-        <div className="relative grid gap-6 bg-white px-5 py-6 sm:gap-8 sm:p-8 lg:grid-cols-2">
+    <div
+      className={`absolute left-1/2 z-10 mt-8 w-screen max-w-md -translate-x-1/2 transform px-2 sm:px-0 ${maxWidthClass}`}
+    >
+      <div className="overflow-hidden rounded-2xl shadow-xl ring-1 ring-black ring-opacity-5 bg-white">
+        {/* Menu Items */}
+        <div className={`relative grid gap-1 p-4 ${columnClass}`}>
           {children}
         </div>
+
+        {/* Footer */}
         {props.footer && (
-          <div className="bg-gray-50 p-5 sm:p-8">
+          <div className="border-t border-gray-100 bg-gray-50 px-4 py-4">
             <Link
               to={props.footer.link}
               openInNewTab={true}
-              className="-m-3 flow-root rounded-md p-3 transition duration-150 ease-in-out hover:bg-gray-100"
+              className="group flex items-center gap-3 rounded-lg p-2.5 -m-2 transition-colors hover:bg-gray-100"
             >
-              <span className="flex items-center">
-                <span className="text-base font-medium text-gray-900">
+              <div className="flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-lg bg-gray-100 ring-1 ring-gray-200 group-hover:bg-gray-200 group-hover:ring-gray-300 transition-all">
+                <Icon
+                  icon={IconProp.GitHub}
+                  className="h-5 w-5 text-gray-700"
+                />
+              </div>
+              <div className="flex-1 min-w-0 text-left">
+                <p className="text-sm font-medium text-gray-900">
                   {props.footer.title}
-                </span>
-              </span>
-              <span className="mt-1 block text-sm text-gray-500 text-left">
-                {props.footer.description}
-              </span>
+                </p>
+                <p className="text-xs text-gray-500">
+                  {props.footer.description}
+                </p>
+              </div>
             </Link>
           </div>
         )}
@@ -49,4 +83,4 @@ const NavBarItem: FunctionComponent<ComponentProps> = (
   );
 };
 
-export default NavBarItem;
+export default NavBarMenu;

package/UI/Components/Navbar/NavBarMenuItem.tsx

@@ -10,24 +10,122 @@ export interface ComponentProps {
   icon: IconProp;
   description: string;
   onClick: () => void;
+  iconColor?: string; // Tailwind color name like "blue", "purple", "amber"
 }
 
 const NavBarMenuItem: FunctionComponent<ComponentProps> = (
   props: ComponentProps,
 ): ReactElement => {
+  // Default to indigo if no color specified
+  const colorName: string = props.iconColor || "indigo";
+
+  // Map color names to their respective Tailwind classes
+  const colorClasses: Record<
+    string,
+    { bg: string; ring: string; hoverBg: string; hoverRing: string }
+  > = {
+    purple: {
+      bg: "bg-purple-50",
+      ring: "ring-purple-200",
+      hoverBg: "hover:bg-purple-50",
+      hoverRing: "group-hover:ring-purple-300",
+    },
+    blue: {
+      bg: "bg-blue-50",
+      ring: "ring-blue-200",
+      hoverBg: "hover:bg-blue-50",
+      hoverRing: "group-hover:ring-blue-300",
+    },
+    gray: {
+      bg: "bg-gray-100",
+      ring: "ring-gray-300",
+      hoverBg: "hover:bg-gray-50",
+      hoverRing: "group-hover:ring-gray-400",
+    },
+    amber: {
+      bg: "bg-amber-50",
+      ring: "ring-amber-200",
+      hoverBg: "hover:bg-amber-50",
+      hoverRing: "group-hover:ring-amber-300",
+    },
+    green: {
+      bg: "bg-green-50",
+      ring: "ring-green-200",
+      hoverBg: "hover:bg-green-50",
+      hoverRing: "group-hover:ring-green-300",
+    },
+    cyan: {
+      bg: "bg-cyan-50",
+      ring: "ring-cyan-200",
+      hoverBg: "hover:bg-cyan-50",
+      hoverRing: "group-hover:ring-cyan-300",
+    },
+    slate: {
+      bg: "bg-slate-100",
+      ring: "ring-slate-300",
+      hoverBg: "hover:bg-slate-50",
+      hoverRing: "group-hover:ring-slate-400",
+    },
+    indigo: {
+      bg: "bg-indigo-50",
+      ring: "ring-indigo-200",
+      hoverBg: "hover:bg-indigo-50",
+      hoverRing: "group-hover:ring-indigo-300",
+    },
+    rose: {
+      bg: "bg-rose-50",
+      ring: "ring-rose-200",
+      hoverBg: "hover:bg-rose-50",
+      hoverRing: "group-hover:ring-rose-300",
+    },
+    violet: {
+      bg: "bg-violet-50",
+      ring: "ring-violet-200",
+      hoverBg: "hover:bg-violet-50",
+      hoverRing: "group-hover:ring-violet-300",
+    },
+    orange: {
+      bg: "bg-orange-50",
+      ring: "ring-orange-200",
+      hoverBg: "hover:bg-orange-50",
+      hoverRing: "group-hover:ring-orange-300",
+    },
+    stone: {
+      bg: "bg-stone-100",
+      ring: "ring-stone-300",
+      hoverBg: "hover:bg-stone-50",
+      hoverRing: "group-hover:ring-stone-400",
+    },
+    sky: {
+      bg: "bg-sky-50",
+      ring: "ring-sky-200",
+      hoverBg: "hover:bg-sky-50",
+      hoverRing: "group-hover:ring-sky-300",
+    },
+  };
+
+  const colors: {
+    bg: string;
+    ring: string;
+    hoverBg: string;
+    hoverRing: string;
+  } = colorClasses[colorName] || colorClasses["indigo"]!;
+
   return (
     <div className="dropdown">
       <Link
         onClick={props.onClick}
         to={props.route}
-        className="-m-3 text-left flex items-start rounded-lg p-3 transition duration-150 ease-in-out hover:bg-gray-50"
+        className={`group flex items-center gap-3 rounded-lg p-2.5 transition-colors ${colors.hoverBg}`}
       >
-        <div className="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-md bg-indigo-500 text-white sm:h-12 sm:w-12">
-          <Icon icon={props.icon} className="h-6 w-6" />
+        <div
+          className={`flex h-9 w-9 flex-shrink-0 items-center justify-center rounded-lg ${colors.bg} ring-1 ${colors.ring} ${colors.hoverRing} transition-all`}
+        >
+          <Icon icon={props.icon} className="h-4 w-4 text-gray-600" />
         </div>
-        <div className="ml-4">
-          <p className="text-base font-medium text-gray-900">{props.title}</p>
-          <p className="text-sm text-gray-500">{props.description}</p>
+        <div className="flex-1 min-w-0 text-left">
+          <p className="text-sm font-medium text-gray-900">{props.title}</p>
+          <p className="text-xs text-gray-500">{props.description}</p>
         </div>
       </Link>
     </div>

package/build/dist/Server/API/AIAgentDataAPI.js

@@ -266,8 +266,17 @@ export default class AIAgentDataAPI {
                 if (!codeRepository.gitHubAppInstallationId) {
                     return Response.sendErrorResponse(req, res, new BadDataException("No GitHub App installation ID found for this repository"));
                 }
-                // Generate GitHub installation access token
-                const tokenData = await GitHubUtil.getInstallationAccessToken(codeRepository.gitHubAppInstallationId);
+                /*
+                 * Generate GitHub installation access token with write permissions
+                 * Required for AI Agent to push branches and create pull requests
+                 */
+                const tokenData = await GitHubUtil.getInstallationAccessToken(codeRepository.gitHubAppInstallationId, {
+                    permissions: {
+                        contents: "write", // Required for pushing branches
+                        pull_requests: "write", // Required for creating PRs
+                        metadata: "read", // Required for reading repository metadata
+                    },
+                });
                 const repositoryUrl = `https://github.com/${codeRepository.organizationName}/${codeRepository.repositoryName}.git`;
                 logger.debug(`Generated access token for repository ${codeRepository.organizationName}/${codeRepository.repositoryName}`);
                 return Response.sendJsonObjectResponse(req, res, {