Fix dark/light theme bug and introduce automatic option

.prettierrc

@@ -0,0 +1,5 @@
+{
+  "tabWidth": 2,
+  "useTabs": false,
+  "printWidth": 120
+}

LICENSE

@@ -0,0 +1,338 @@
+                    GNU GENERAL PUBLIC LICENSE
+                       Version 2, June 1991
+
+ Copyright (C) 1989, 1991 Free Software Foundation, Inc.,
+ <https://fsf.org/>
+ Everyone is permitted to copy and distribute verbatim copies
+ of this license document, but changing it is not allowed.
+
+                            Preamble
+
+  The licenses for most software are designed to take away your
+freedom to share and change it.  By contrast, the GNU General Public
+License is intended to guarantee your freedom to share and change free
+software--to make sure the software is free for all its users.  This
+General Public License applies to most of the Free Software
+Foundation's software and to any other program whose authors commit to
+using it.  (Some other Free Software Foundation software is covered by
+the GNU Lesser General Public License instead.)  You can apply it to
+your programs, too.
+
+  When we speak of free software, we are referring to freedom, not
+price.  Our General Public Licenses are designed to make sure that you
+have the freedom to distribute copies of free software (and charge for
+this service if you wish), that you receive source code or can get it
+if you want it, that you can change the software or use pieces of it
+in new free programs; and that you know you can do these things.
+
+  To protect your rights, we need to make restrictions that forbid
+anyone to deny you these rights or to ask you to surrender the rights.
+These restrictions translate to certain responsibilities for you if you
+distribute copies of the software, or if you modify it.
+
+  For example, if you distribute copies of such a program, whether
+gratis or for a fee, you must give the recipients all the rights that
+you have.  You must make sure that they, too, receive or can get the
+source code.  And you must show them these terms so they know their
+rights.
+
+  We protect your rights with two steps: (1) copyright the software, and
+(2) offer you this license which gives you legal permission to copy,
+distribute and/or modify the software.
+
+  Also, for each author's protection and ours, we want to make certain
+that everyone understands that there is no warranty for this free
+software.  If the software is modified by someone else and passed on, we
+want its recipients to know that what they have is not the original, so
+that any problems introduced by others will not reflect on the original
+authors' reputations.
+
+  Finally, any free program is threatened constantly by software
+patents.  We wish to avoid the danger that redistributors of a free
+program will individually obtain patent licenses, in effect making the
+program proprietary.  To prevent this, we have made it clear that any
+patent must be licensed for everyone's free use or not licensed at all.
+
+  The precise terms and conditions for copying, distribution and
+modification follow.
+
+                    GNU GENERAL PUBLIC LICENSE
+   TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
+
+  0. This License applies to any program or other work which contains
+a notice placed by the copyright holder saying it may be distributed
+under the terms of this General Public License.  The "Program", below,
+refers to any such program or work, and a "work based on the Program"
+means either the Program or any derivative work under copyright law:
+that is to say, a work containing the Program or a portion of it,
+either verbatim or with modifications and/or translated into another
+language.  (Hereinafter, translation is included without limitation in
+the term "modification".)  Each licensee is addressed as "you".
+
+Activities other than copying, distribution and modification are not
+covered by this License; they are outside its scope.  The act of
+running the Program is not restricted, and the output from the Program
+is covered only if its contents constitute a work based on the
+Program (independent of having been made by running the Program).
+Whether that is true depends on what the Program does.
+
+  1. You may copy and distribute verbatim copies of the Program's
+source code as you receive it, in any medium, provided that you
+conspicuously and appropriately publish on each copy an appropriate
+copyright notice and disclaimer of warranty; keep intact all the
+notices that refer to this License and to the absence of any warranty;
+and give any other recipients of the Program a copy of this License
+along with the Program.
+
+You may charge a fee for the physical act of transferring a copy, and
+you may at your option offer warranty protection in exchange for a fee.
+
+  2. You may modify your copy or copies of the Program or any portion
+of it, thus forming a work based on the Program, and copy and
+distribute such modifications or work under the terms of Section 1
+above, provided that you also meet all of these conditions:
+
+    a) You must cause the modified files to carry prominent notices
+    stating that you changed the files and the date of any change.
+
+    b) You must cause any work that you distribute or publish, that in
+    whole or in part contains or is derived from the Program or any
+    part thereof, to be licensed as a whole at no charge to all third
+    parties under the terms of this License.
+
+    c) If the modified program normally reads commands interactively
+    when run, you must cause it, when started running for such
+    interactive use in the most ordinary way, to print or display an
+    announcement including an appropriate copyright notice and a
+    notice that there is no warranty (or else, saying that you provide
+    a warranty) and that users may redistribute the program under
+    these conditions, and telling the user how to view a copy of this
+    License.  (Exception: if the Program itself is interactive but
+    does not normally print such an announcement, your work based on
+    the Program is not required to print an announcement.)
+
+These requirements apply to the modified work as a whole.  If
+identifiable sections of that work are not derived from the Program,
+and can be reasonably considered independent and separate works in
+themselves, then this License, and its terms, do not apply to those
+sections when you distribute them as separate works.  But when you
+distribute the same sections as part of a whole which is a work based
+on the Program, the distribution of the whole must be on the terms of
+this License, whose permissions for other licensees extend to the
+entire whole, and thus to each and every part regardless of who wrote it.
+
+Thus, it is not the intent of this section to claim rights or contest
+your rights to work written entirely by you; rather, the intent is to
+exercise the right to control the distribution of derivative or
+collective works based on the Program.
+
+In addition, mere aggregation of another work not based on the Program
+with the Program (or with a work based on the Program) on a volume of
+a storage or distribution medium does not bring the other work under
+the scope of this License.
+
+  3. You may copy and distribute the Program (or a work based on it,
+under Section 2) in object code or executable form under the terms of
+Sections 1 and 2 above provided that you also do one of the following:
+
+    a) Accompany it with the complete corresponding machine-readable
+    source code, which must be distributed under the terms of Sections
+    1 and 2 above on a medium customarily used for software interchange; or,
+
+    b) Accompany it with a written offer, valid for at least three
+    years, to give any third party, for a charge no more than your
+    cost of physically performing source distribution, a complete
+    machine-readable copy of the corresponding source code, to be
+    distributed under the terms of Sections 1 and 2 above on a medium
+    customarily used for software interchange; or,
+
+    c) Accompany it with the information you received as to the offer
+    to distribute corresponding source code.  (This alternative is
+    allowed only for noncommercial distribution and only if you
+    received the program in object code or executable form with such
+    an offer, in accord with Subsection b above.)
+
+The source code for a work means the preferred form of the work for
+making modifications to it.  For an executable work, complete source
+code means all the source code for all modules it contains, plus any
+associated interface definition files, plus the scripts used to
+control compilation and installation of the executable.  However, as a
+special exception, the source code distributed need not include
+anything that is normally distributed (in either source or binary
+form) with the major components (compiler, kernel, and so on) of the
+operating system on which the executable runs, unless that component
+itself accompanies the executable.
+
+If distribution of executable or object code is made by offering
+access to copy from a designated place, then offering equivalent
+access to copy the source code from the same place counts as
+distribution of the source code, even though third parties are not
+compelled to copy the source along with the object code.
+
+  4. You may not copy, modify, sublicense, or distribute the Program
+except as expressly provided under this License.  Any attempt
+otherwise to copy, modify, sublicense or distribute the Program is
+void, and will automatically terminate your rights under this License.
+However, parties who have received copies, or rights, from you under
+this License will not have their licenses terminated so long as such
+parties remain in full compliance.
+
+  5. You are not required to accept this License, since you have not
+signed it.  However, nothing else grants you permission to modify or
+distribute the Program or its derivative works.  These actions are
+prohibited by law if you do not accept this License.  Therefore, by
+modifying or distributing the Program (or any work based on the
+Program), you indicate your acceptance of this License to do so, and
+all its terms and conditions for copying, distributing or modifying
+the Program or works based on it.
+
+  6. Each time you redistribute the Program (or any work based on the
+Program), the recipient automatically receives a license from the
+original licensor to copy, distribute or modify the Program subject to
+these terms and conditions.  You may not impose any further
+restrictions on the recipients' exercise of the rights granted herein.
+You are not responsible for enforcing compliance by third parties to
+this License.
+
+  7. If, as a consequence of a court judgment or allegation of patent
+infringement or for any other reason (not limited to patent issues),
+conditions are imposed on you (whether by court order, agreement or
+otherwise) that contradict the conditions of this License, they do not
+excuse you from the conditions of this License.  If you cannot
+distribute so as to satisfy simultaneously your obligations under this
+License and any other pertinent obligations, then as a consequence you
+may not distribute the Program at all.  For example, if a patent
+license would not permit royalty-free redistribution of the Program by
+all those who receive copies directly or indirectly through you, then
+the only way you could satisfy both it and this License would be to
+refrain entirely from distribution of the Program.
+
+If any portion of this section is held invalid or unenforceable under
+any particular circumstance, the balance of the section is intended to
+apply and the section as a whole is intended to apply in other
+circumstances.
+
+It is not the purpose of this section to induce you to infringe any
+patents or other property right claims or to contest validity of any
+such claims; this section has the sole purpose of protecting the
+integrity of the free software distribution system, which is
+implemented by public license practices.  Many people have made
+generous contributions to the wide range of software distributed
+through that system in reliance on consistent application of that
+system; it is up to the author/donor to decide if he or she is willing
+to distribute software through any other system and a licensee cannot
+impose that choice.
+
+This section is intended to make thoroughly clear what is believed to
+be a consequence of the rest of this License.
+
+  8. If the distribution and/or use of the Program is restricted in
+certain countries either by patents or by copyrighted interfaces, the
+original copyright holder who places the Program under this License
+may add an explicit geographical distribution limitation excluding
+those countries, so that distribution is permitted only in or among
+countries not thus excluded.  In such case, this License incorporates
+the limitation as if written in the body of this License.
+
+  9. The Free Software Foundation may publish revised and/or new versions
+of the General Public License from time to time.  Such new versions will
+be similar in spirit to the present version, but may differ in detail to
+address new problems or concerns.
+
+Each version is given a distinguishing version number.  If the Program
+specifies a version number of this License which applies to it and "any
+later version", you have the option of following the terms and conditions
+either of that version or of any later version published by the Free
+Software Foundation.  If the Program does not specify a version number of
+this License, you may choose any version ever published by the Free Software
+Foundation.
+
+  10. If you wish to incorporate parts of the Program into other free
+programs whose distribution conditions are different, write to the author
+to ask for permission.  For software which is copyrighted by the Free
+Software Foundation, write to the Free Software Foundation; we sometimes
+make exceptions for this.  Our decision will be guided by the two goals
+of preserving the free status of all derivatives of our free software and
+of promoting the sharing and reuse of software generally.
+
+                            NO WARRANTY
+
+  11. BECAUSE THE PROGRAM IS LICENSED FREE OF CHARGE, THERE IS NO WARRANTY
+FOR THE PROGRAM, TO THE EXTENT PERMITTED BY APPLICABLE LAW.  EXCEPT WHEN
+OTHERWISE STATED IN WRITING THE COPYRIGHT HOLDERS AND/OR OTHER PARTIES
+PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESSED
+OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF
+MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE.  THE ENTIRE RISK AS
+TO THE QUALITY AND PERFORMANCE OF THE PROGRAM IS WITH YOU.  SHOULD THE
+PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF ALL NECESSARY SERVICING,
+REPAIR OR CORRECTION.
+
+  12. IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
+WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MAY MODIFY AND/OR
+REDISTRIBUTE THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES,
+INCLUDING ANY GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING
+OUT OF THE USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED
+TO LOSS OF DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY
+YOU OR THIRD PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER
+PROGRAMS), EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE
+POSSIBILITY OF SUCH DAMAGES.
+
+                     END OF TERMS AND CONDITIONS
+
+            How to Apply These Terms to Your New Programs
+
+  If you develop a new program, and you want it to be of the greatest
+possible use to the public, the best way to achieve this is to make it
+free software which everyone can redistribute and change under these terms.
+
+  To do so, attach the following notices to the program.  It is safest
+to attach them to the start of each source file to most effectively
+convey the exclusion of warranty; and each file should have at least
+the "copyright" line and a pointer to where the full notice is found.
+
+    <one line to give the program's name and a brief idea of what it does.>
+    Copyright (C) <year>  <name of author>
+
+    This program is free software; you can redistribute it and/or modify
+    it under the terms of the GNU General Public License as published by
+    the Free Software Foundation; either version 2 of the License, or
+    (at your option) any later version.
+
+    This program is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU General Public License for more details.
+
+    You should have received a copy of the GNU General Public License along
+    with this program; if not, see <https://www.gnu.org/licenses/>.
+
+Also add information on how to contact you by electronic and paper mail.
+
+If the program is interactive, make it output a short notice like this
+when it starts in an interactive mode:
+
+    Gnomovision version 69, Copyright (C) year name of author
+    Gnomovision comes with ABSOLUTELY NO WARRANTY; for details type `show w'.
+    This is free software, and you are welcome to redistribute it
+    under certain conditions; type `show c' for details.
+
+The hypothetical commands `show w' and `show c' should show the appropriate
+parts of the General Public License.  Of course, the commands you use may
+be called something other than `show w' and `show c'; they could even be
+mouse-clicks or menu items--whatever suits your program.
+
+You should also get your employer (if you work as a programmer) or your
+school, if any, to sign a "copyright disclaimer" for the program, if
+necessary.  Here is a sample; alter the names:
+
+  Yoyodyne, Inc., hereby disclaims all copyright interest in the program
+  `Gnomovision' (which makes passes at compilers) written by James Hacker.
+
+  <signature of Moe Ghoul>, 1 April 1989
+  Moe Ghoul, President of Vice
+
+This General Public License does not permit incorporating your program into
+proprietary programs.  If your program is a subroutine library, you may
+consider it more useful to permit linking proprietary applications with the
+library.  If this is what you want to do, use the GNU Lesser General
+Public License instead of this License.

package.json

@@ -3,6 +3,16 @@
   "private": true,
   "version": "0.0.0",
   "type": "module",
+  "license": "GPL-2.0+",
+  "author": "alula",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/alula/hbpatcher"
+  },
+  "homepage": "https://github.com/alula/hbpatcher",
+  "bugs": {
+    "url": "https://github.com/alula/hbpatcher/issues"
+  },
   "scripts": {
     "dev": "vite",
     "build": "tsc -b && vite build",

src/components/FileDropZone.tsx

@@ -1,5 +1,6 @@
 import { FileDown } from "lucide-react";
 import { useRef, useState } from "react";
+import { SUPPORTED_EXTENSIONS } from "../constants";
 
 interface FileDropZoneProps {
   onFileSelected: (file: File) => void;
@@ -32,11 +33,7 @@ export function FileDropZone({ onFileSelected }: FileDropZoneProps) {
     setIsDragging(false);
 
     const files = Array.from(e.dataTransfer.files);
-    const nroFile = files.find((file) => file.name.endsWith(".nro"));
+    if (files.length > 0) {
-
-    if (nroFile) {
-      onFileSelected(nroFile);
-    } else if (files.length > 0) {
       onFileSelected(files[0]);
     }
   };
@@ -81,7 +78,6 @@ export function FileDropZone({ onFileSelected }: FileDropZoneProps) {
       <input
         ref={fileInputRef}
         type="file"
-        accept=".nro"
         onChange={handleFileInput}
         className="hidden"
       />
@@ -90,9 +86,11 @@ export function FileDropZone({ onFileSelected }: FileDropZoneProps) {
           <FileDown size={48} strokeWidth={1.5} />
         </div>
         <h3 className="text-switch-text text-xl font-normal">
-          {isDragging ? "Drop file now" : "Select NRO File"}
+          {isDragging ? "Drop file now" : "Select File"}
         </h3>
-        <p className="text-switch-text-info">Drag & drop or click to browse</p>
+        <p className="text-switch-text-info">
+          Drag & drop or click to browse ({SUPPORTED_EXTENSIONS.join(", ")})
+        </p>
       </div>
     </div>
   );

src/components/MemoryLayout.tsx

@@ -0,0 +1,374 @@
+const COLORS = {
+  red: { box: "fill-red-900/50 stroke-red-600", text: "fill-red-300" },
+  blue: { box: "fill-blue-900/50 stroke-blue-700", text: "fill-blue-300" },
+  green: { box: "fill-green-900/50 stroke-green-700", text: "fill-green-300" },
+  gray: { box: "fill-slate-800/50 stroke-slate-600", text: "fill-slate-300" },
+  cyan: { box: "fill-cyan-900/50 stroke-cyan-700", text: "fill-cyan-300" },
+  purple: {
+    box: "fill-purple-900/50 stroke-purple-700",
+    text: "fill-purple-300",
+  },
+};
+
+// Memory layout configuration - percentages for SVG
+const MEMORY_LAYOUT = {
+  chartHeight: 56,
+  barHeight: 40,
+  rowSpacing: 16,
+  // Width percentages
+  ipc: 0.35,
+  kernel: 0.1,
+  conflict: 0.05,
+  reserved: 0.2,
+  user: 0.25,
+  segments: [
+    {
+      id: "ipc",
+      label: "IPC Message buffer",
+      range: "0x0",
+      boxClass: COLORS.cyan.box,
+      textClass: COLORS.cyan.text,
+    },
+    {
+      id: "kernel",
+      label: "Kernel",
+      range: "0x100",
+      boxClass: COLORS.blue.box,
+      textClass: COLORS.blue.text,
+      tooltip: "Various fields written by the kernel",
+    },
+    {
+      id: "conflict",
+      label: "New!",
+      range: "0x108-0x110",
+      boxClass: COLORS.purple.box,
+      textClass: COLORS.purple.text,
+      tooltip: "0x108-0x110: Added in 21.0.0 (CPU Time)",
+    },
+    {
+      id: "reserved",
+      label: "Reserved",
+      range: "0x110-0x180",
+      boxClass: COLORS.gray.box,
+      textClass: COLORS.gray.text,
+    },
+    {
+      id: "user",
+      label: "User TLS",
+      range: "0x180-0x200",
+      boxClass: COLORS.green.box,
+      textClass: COLORS.green.text,
+    },
+  ],
+} as const;
+
+// Generate background path (fill only, no stroke)
+const backgroundPath = (
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+  radius: number,
+  topLeft: boolean,
+  topRight: boolean,
+  bottomRight: boolean,
+  bottomLeft: boolean,
+): string => {
+  const tl = topLeft ? radius : 0;
+  const tr = topRight ? radius : 0;
+  const br = bottomRight ? radius : 0;
+  const bl = bottomLeft ? radius : 0;
+
+  return `M ${x + tl} ${y}
+            L ${x + width - tr} ${y}
+            ${tr > 0 ? `Q ${x + width} ${y} ${x + width} ${y + tr}` : `L ${x + width} ${y}`}
+            L ${x + width} ${y + height - br}
+            ${br > 0 ? `Q ${x + width} ${y + height} ${x + width - br} ${y + height}` : `L ${x + width} ${y + height}`}
+            L ${x + bl} ${y + height}
+            ${bl > 0 ? `Q ${x} ${y + height} ${x} ${y + height - bl}` : `L ${x} ${y + height}`}
+            L ${x} ${y + tl}
+            ${tl > 0 ? `Q ${x} ${y} ${x + tl} ${y}` : `L ${x} ${y}`}
+            Z`;
+};
+
+// Generate stroke path (no inner strokes between segments)
+// Case 1: leftmost segment - start at top right, go left, rounded corner, go down, rounded corner, go right
+// Case 2: inner segment - two horizontal lines (top and bottom)
+// Case 3: rightmost segment - start at top left, go right, rounded corner, go down, rounded corner, go left
+const strokePath = (
+  x: number,
+  y: number,
+  width: number,
+  height: number,
+  radius: number,
+  isFirst: boolean,
+  isLast: boolean,
+): string => {
+  if (isFirst) {
+    // Leftmost segment: start at top right, go left, rounded corner, go down, rounded corner, go right
+    return `M ${x + width} ${y}
+            L ${x + radius} ${y}
+            Q ${x} ${y} ${x} ${y + radius}
+            L ${x} ${y + height - radius}
+            Q ${x} ${y + height} ${x + radius} ${y + height}
+            L ${x + width} ${y + height}`;
+  } else if (isLast) {
+    // Rightmost segment: start at top left, go right, rounded corner, go down, rounded corner, go left
+    return `M ${x} ${y}
+            L ${x + width - radius} ${y}
+            Q ${x + width} ${y} ${x + width} ${y + radius}
+            L ${x + width} ${y + height - radius}
+            Q ${x + width} ${y + height} ${x + width - radius} ${y + height}
+            L ${x} ${y + height}`;
+  } else {
+    // Inner segment: two horizontal lines (top and bottom)
+    return `M ${x} ${y}
+            L ${x + width} ${y}
+            M ${x} ${y + height}
+            L ${x + width} ${y + height}`;
+  }
+};
+
+export function MemoryLayout() {
+  const { chartHeight, barHeight, rowSpacing, segments } = MEMORY_LAYOUT;
+  const { ipc, kernel, conflict, reserved } = MEMORY_LAYOUT;
+
+  // Calculate absolute positions for 5 segments
+  const x0 = 0;
+  const x1 = ipc; // 0x100
+  const x2 = ipc + kernel; // 0x110
+  const x3 = ipc + kernel + conflict; // 0x110 (conflict overlaps)
+  const x4 = ipc + kernel + conflict + reserved; // 0x180
+  const x5 = 1; // 0x200
+
+  // SVG viewBox dimensions (will scale to container width)
+  const svgWidth = 800;
+  // Remove labelHeight from calculation since we're integrating labels into bars
+  const svgHeight = chartHeight + rowSpacing + barHeight + rowSpacing + barHeight;
+
+  // Padding to prevent stroke clipping at edges
+  const padding = 1;
+  const viewBoxWidth = svgWidth + padding * 2;
+  const viewBoxHeight = svgHeight + padding * 2;
+
+  // Helper to convert percentage to pixel (with padding offset)
+  const px = (percent: number) => percent * svgWidth + padding;
+
+  // Calculate segment width based on index (supports 5 segments)
+  const getSegmentWidth = (index: number): number => {
+    if (index === 0) return px(x1) - px(x0);
+    if (index === 1) return px(x2) - px(x1);
+    if (index === 2) return px(x3) - px(x2);
+    if (index === 3) return px(x4) - px(x3);
+    return px(x5) - px(x4);
+  };
+
+  // Calculate segment start position based on index (supports 5 segments)
+  const getSegmentStart = (index: number): number => {
+    if (index === 0) return px(x0);
+    if (index === 1) return px(x1);
+    if (index === 2) return px(x2);
+    if (index === 3) return px(x3);
+    return px(x4);
+  };
+
+  return (
+    <div className="space-y-6 not-prose font-sans text-xs mt-6 select-none">
+      {/* Header */}
+      <div className="space-y-2">
+        <div className="text-switch-text-info font-medium flex items-center gap-2">
+          <span className="w-2 h-2 rounded-full bg-switch-text-info"></span>
+          <span>ThreadLocalRegion Memory Layout (non-linear, for visual reference only)</span>
+        </div>
+
+        {/* SVG Chart - Seamless, maintains aspect ratio */}
+        <div className="w-full bg-switch-surface-1" style={{ aspectRatio: viewBoxWidth / viewBoxHeight }}>
+          <svg
+            viewBox={`0 0 ${viewBoxWidth} ${viewBoxHeight}`}
+            className="w-full h-full block"
+            preserveAspectRatio="xMidYMid meet"
+            style={{ display: "block" }}
+          >
+            {/* Main Memory Layout Chart */}
+            <g id="main-chart">
+              {/* Background segments */}
+              {segments.map((segment, index) => {
+                const xStart = getSegmentStart(index);
+                const width = getSegmentWidth(index);
+                const isFirst = index === 0;
+                const isLast = index === segments.length - 1;
+                const borderRadius = 4;
+
+                // Extract fill and stroke classes
+                const classes = segment.boxClass.split(" ");
+                const fillClass = classes.find((c) => c.startsWith("fill-")) || "";
+                const strokeClass = classes.find((c) => c.startsWith("stroke-")) || "";
+
+                return (
+                  <g key={segment.id}>
+                    {/* Background (fill only) */}
+                    {isFirst || isLast ? (
+                      <path
+                        d={backgroundPath(
+                          xStart,
+                          padding,
+                          width,
+                          chartHeight,
+                          borderRadius,
+                          isFirst, // topLeft
+                          isLast, // topRight
+                          isLast, // bottomRight
+                          isFirst, // bottomLeft
+                        )}
+                        className={fillClass}
+                        fillRule="evenodd"
+                      />
+                    ) : (
+                      <rect x={xStart} y={padding} width={width} height={chartHeight} className={fillClass} />
+                    )}
+
+                    {/* Stroke (no inner strokes) */}
+                    <path
+                      d={strokePath(xStart, padding, width, chartHeight, borderRadius, isFirst, isLast)}
+                      className={strokeClass}
+                      fill="none"
+                      strokeWidth={1}
+                    />
+
+                    {segment.id === "conflict" ? (
+                      <text
+                        x={xStart + width / 2}
+                        y={padding + chartHeight / 2}
+                        textAnchor="middle"
+                        dominantBaseline="middle"
+                        className={segment.textClass}
+                        fontSize="9"
+                        fontWeight="bold"
+                        transform={`rotate(-90 ${xStart + width / 2} ${padding + chartHeight / 2})`}
+                      >
+                        {segment.label}
+                      </text>
+                    ) : (
+                      <>
+                        <text
+                          x={xStart + width / 2}
+                          y={padding + chartHeight / 2 - 6}
+                          textAnchor="middle"
+                          dominantBaseline="middle"
+                          className={segment.textClass}
+                          fontSize="11"
+                          fontWeight="bold"
+                        >
+                          {segment.label}
+                        </text>
+                        <text
+                          x={xStart + width / 2}
+                          y={padding + chartHeight / 2 + 6}
+                          textAnchor="middle"
+                          dominantBaseline="middle"
+                          className={segment.textClass}
+                          fontSize="9"
+                          opacity={0.6}
+                        >
+                          {segment.range}
+                        </text>
+                      </>
+                    )}
+                  </g>
+                );
+              })}
+            </g>
+
+            {/* Vertical Guide Lines */}
+            <g id="guide-lines" strokeDasharray="4,4" opacity={0.4}>
+              <line
+                x1={px(x1)}
+                y1={padding + chartHeight}
+                x2={px(x1)}
+                y2={padding + svgHeight}
+                stroke="currentColor"
+                className="text-switch-border"
+                strokeWidth={1}
+              />
+              <line
+                x1={px(x2)}
+                y1={padding + chartHeight}
+                x2={px(x2)}
+                y2={padding + svgHeight}
+                stroke="currentColor"
+                className="text-switch-border"
+                strokeWidth={1}
+              />
+              <line
+                x1={px(x3)}
+                y1={padding + chartHeight}
+                x2={px(x3)}
+                y2={padding + svgHeight}
+                stroke="rgb(239 68 68)"
+                strokeWidth={1}
+                opacity={0.3}
+              />
+              <line
+                x1={px(x4)}
+                y1={padding + chartHeight}
+                x2={px(x4)}
+                y2={padding + svgHeight}
+                stroke="currentColor"
+                className="text-switch-border"
+                strokeWidth={1}
+              />
+            </g>
+
+            <g id="comparison-rows">
+              <g id="old-libnx">
+                <rect
+                  x={px(x2)}
+                  y={padding + chartHeight + rowSpacing}
+                  width={px(x5) - px(x2)}
+                  height={barHeight}
+                  className={COLORS.red.box}
+                  strokeWidth={1}
+                  rx={4}
+                />
+                <text
+                  x={px(x2 + (x5 - x2) / 2)}
+                  y={padding + chartHeight + rowSpacing + barHeight / 2}
+                  textAnchor="middle"
+                  dominantBaseline="middle"
+                  className={COLORS.red.text}
+                  fontSize="10"
+                  fontWeight="600"
+                >
+                  libnx before v4.10.0
+                </text>
+              </g>
+
+              <g id="new-libnx">
+                <rect
+                  x={px(x4)}
+                  y={padding + chartHeight + rowSpacing + barHeight + rowSpacing}
+                  width={px(x5) - px(x4)}
+                  height={barHeight}
+                  className={COLORS.green.box}
+                  strokeWidth={1}
+                  rx={4}
+                />
+                <text
+                  x={px(x4 + (x5 - x4) / 2)}
+                  y={padding + chartHeight + rowSpacing + barHeight + rowSpacing + barHeight / 2}
+                  textAnchor="middle"
+                  dominantBaseline="middle"
+                  className={COLORS.green.text}
+                  fontSize="10"
+                  fontWeight="600"
+                >
+                  New libnx / Patched / Official software
+                </text>
+              </g>
+            </g>
+          </svg>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/ThemeSelector.tsx

@@ -1,6 +1,23 @@
 import { useEffect, useState } from "react";
 
-type Theme = "dark" | "light";
+type Theme = "dark" | "light" | "automatic";
+
+const DiagonalSplitPreview = () => {
+  return (
+    <svg
+      width="64"
+      height="40"
+      viewBox="0 0 64 40"
+      className="w-full h-full"
+      preserveAspectRatio="none"
+    >
+      {/* Upper triangle (light) */}
+      <polygon points="0,0 64,0 64,40" fill="#ebebeb" />
+      {/* Lower triangle (dark) */}
+      <polygon points="0,0 0,40 64,40" fill="#2d2d2d" />
+    </svg>
+  );
+};
 
 const ThemeOption = ({
   value,
@@ -12,7 +29,7 @@ const ThemeOption = ({
 }: {
   value: Theme;
   label: string;
-  previewColor: string;
+  previewColor: string | "diagonalSplit";
   theme: Theme;
   setTheme: (theme: Theme) => void;
   isLast?: boolean;
@@ -40,10 +57,16 @@ const ThemeOption = ({
     >
       <div className="flex items-center gap-6">
         {/* Preview Box */}
-        <div
+        <div className="w-16 h-10 border border-switch-line-sep overflow-hidden">
-          className="w-16 h-10 border border-switch-line-sep shadow-sm"
+          {previewColor === "diagonalSplit" ? (
-          style={{ backgroundColor: previewColor }}
+            <DiagonalSplitPreview />
-        />
+          ) : (
+            <div
+              className="w-full h-full"
+              style={{ backgroundColor: previewColor }}
+            />
+          )}
+        </div>
 
         {/* Label */}
         <span className="text-xl font-normal text-switch-text">{label}</span>
@@ -68,19 +91,66 @@ const ThemeOption = ({
   );
 };
 
+function getSystemTheme(): "dark" | "light" {
+  if (typeof window === "undefined") return "dark";
+  return window.matchMedia("(prefers-color-scheme: dark)").matches
+    ? "dark"
+    : "light";
+}
+
+function getEffectiveTheme(theme: Theme): "dark" | "light" {
+  if (theme === "automatic") {
+    return getSystemTheme();
+  }
+  return theme;
+}
+
 export function ThemeSelector() {
   const [theme, setTheme] = useState<Theme>(() => {
     const saved = localStorage.getItem("theme") as Theme | null;
-    return saved || "dark";
+    // Default to "automatic" if no saved preference
+    return saved || "automatic";
   });
 
   useEffect(() => {
-    document.documentElement.setAttribute("data-theme", theme);
+    const effectiveTheme = getEffectiveTheme(theme);
+    document.documentElement.setAttribute("data-theme", effectiveTheme);
     localStorage.setItem("theme", theme);
   }, [theme]);
 
+  // Listen to system theme changes when "automatic" is selected
+  useEffect(() => {
+    if (theme !== "automatic") return;
+
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    const handleChange = () => {
+      if (theme === "automatic") {
+        const newSystemTheme = getSystemTheme();
+        document.documentElement.setAttribute("data-theme", newSystemTheme);
+      }
+    };
+
+    // Modern browsers
+    if (mediaQuery.addEventListener) {
+      mediaQuery.addEventListener("change", handleChange);
+      return () => mediaQuery.removeEventListener("change", handleChange);
+    }
+    // Fallback for older browsers
+    else if (mediaQuery.addListener) {
+      mediaQuery.addListener(handleChange);
+      return () => mediaQuery.removeListener(handleChange);
+    }
+  }, [theme]);
+
   return (
     <div className="space-y-0" role="radiogroup" aria-label="Theme Selection">
+      <ThemeOption
+        value="automatic"
+        label="Automatic"
+        previewColor="diagonalSplit"
+        theme={theme}
+        setTheme={setTheme}
+      />
       <ThemeOption
         value="light"
         label="Basic White"

src/constants.ts

@@ -0,0 +1,4 @@
+export const SUPPORTED_EXTENSIONS = [".nro", ".ovl"] as const;
+
+export type SupportedExtension = (typeof SUPPORTED_EXTENSIONS)[number];
+

src/index.css

@@ -80,9 +80,6 @@
     min-height: 100vh;
     background-color: var(--color-switch-selected-bg);
     color: var(--switch-text);
-    transition:
-      background-color 0.3s,
-      color 0.3s;
   }
 
   /* Custom Scrollbar */

src/main.tsx

@@ -3,6 +3,24 @@ import { createRoot } from "react-dom/client";
 import "./index.css";
 import App from "./App.tsx";
 
+// Set initial theme before React renders to avoid flash
+function initializeTheme() {
+  const saved = localStorage.getItem("theme");
+  let effectiveTheme: "dark" | "light";
+
+  if (saved === "light" || saved === "dark") {
+    effectiveTheme = saved;
+  } else {
+    // Default to automatic (system preference)
+    const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches;
+    effectiveTheme = prefersDark ? "dark" : "light";
+  }
+
+  document.documentElement.setAttribute("data-theme", effectiveTheme);
+}
+
+initializeTheme();
+
 createRoot(document.getElementById("root")!).render(
   <StrictMode>
     <App />

src/pages/AboutPage.tsx

@@ -1,6 +1,11 @@
 import { Card, CardContent } from "../components/ui/Card";
+import { MemoryLayout } from "../components/MemoryLayout";
 
 const GITHUB_URL = "https://github.com/alula/hbpatcher";
+const DIRTY_HACK_DISCORD_SOURCE =
+  "https://discord.com/channels/269333940928512010/414949821003202562/1440485257550889221";
+const FW_19_FIX_SOURCE =
+  "https://github.com/Atmosphere-NX/Atmosphere/blob/7aa0bed869c7ed642d5503c6c80e3dc337bc56bd/stratosphere/loader/source/ldr_capabilities.cpp#L428";
 
 export function AboutPage() {
   return (
@@ -37,6 +42,39 @@ export function AboutPage() {
             </ol>
           </CardContent>
         </Card>
+        <Card>
+          <CardContent className="space-y-3">
+            <h3 className="text-base font-normal">
+              Found Incompatible Homebrew?
+            </h3>
+            <p className="text-switch-text-info text-sm leading-relaxed">
+              If you encounter unmaintained and closed-source homebrew that
+              doesn't work with this patcher, please{" "}
+              <a
+                href={GITHUB_URL + "/issues"}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-blue-400 hover:text-blue-300 underline"
+              >
+                open an issue on GitHub
+              </a>{" "}
+              or{" "}
+              <a
+                href="https://gbatemp.net/members/alula.601460/"
+                target="_blank"
+                rel="noopener noreferrer"
+                className="text-blue-400 hover:text-blue-300 underline"
+              >
+                DM me on GBATemp
+              </a>
+              .
+            </p>
+            <p className="text-switch-text-info text-sm leading-relaxed">
+              <strong>Note:</strong> I do not offer support for patching
+              piracy-related homebrew (such as DBI).
+            </p>
+          </CardContent>
+        </Card>
         <Card>
           <CardContent className="space-y-3">
             <h3 className="text-base font-normal">For Developers</h3>
@@ -44,7 +82,7 @@ export function AboutPage() {
               Do not rely on this tool. Please recompile your homebrew with{" "}
               <code>libnx v4.10.0</code> (or newer).
             </div>
-            <div className="text-switch-text-info text-base leading-relaxed">
+            <div className="text-switch-text-info text-sm leading-relaxed">
               <p>
                 The updated library resolves the memory conflict and stays
                 backward compatible with older Atmosphère versions and
@@ -60,13 +98,31 @@ export function AboutPage() {
             </div>
           </CardContent>
         </Card>
+        <Card>
+          <CardContent className="space-y-3">
+            <h3 className="text-base font-normal">License</h3>
+            <p className="text-switch-text-info text-sm">
+              This project is licensed under the GNU General Public License v2.0
+              or later (GPL-2.0-or-later). See the{" "}
+              <a
+                href={GITHUB_URL + "/blob/master/LICENSE"}
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                LICENSE
+              </a>{" "}
+              file for details.
+            </p>
+          </CardContent>
+        </Card>
         <div className="space-y-8">
           <section className="space-y-3">
             <h2 className="text-lg font-bold text-switch-text">TL;DR</h2>
             <p className="text-switch-text-info text-sm leading-relaxed">
-              Atmosphère 1.10.0+ integrates kernel optimizations from Firmware
+              Atmosphère integrates kernel optimizations from Firmware 21.0.0.
-              21.0.0. This improves performance but breaks older homebrew,
+              This improves performance but breaks older homebrew compiled with
-              causing crashes or hangs on exit. If your homebrew is
+              libnx versions before v4.10.0, causing crashes that can occur on
+              exit, during thread creation, or at runtime. If your homebrew is
               unmaintained, use this tool to patch the <code>.nro</code> files.
               If the app is still active, ask the developer to update it.
             </p>
@@ -77,21 +133,59 @@ export function AboutPage() {
               How this tool works
             </h3>
             <p className="text-switch-text-info text-sm leading-relaxed">
-              This tool scans your <code>.nro</code> files to see if they rely
+              This tool scans your <code>.nro</code> files to see if they
-              on the old, now-unsafe memory layout. If it detects a conflict, it
+              contain old libnx code that writes to the conflicting memory
-              modifies the binary to{" "}
+              region. If it detects a conflict, it patches certain{" "}
               <a
                 href="https://github.com/switchbrew/libnx/commit/cad06c006e4e0caf9c63755ac6c2a10a52333e27"
                 target="_blank"
                 rel="noopener noreferrer"
               >
-                move its Thread Local Storage (TLS)
+                libnx functions to move their TLS writes
               </a>{" "}
-              from offset <code>0x108</code> to the safe offset{" "}
+              from the conflicting offset <code>0x108</code> to the safe offset{" "}
-              <code>0x180</code>. Effectively, it mimics the result of
+              <code>0x180</code>.
-              recompiling the app with the latest libraries, restoring stability
-              without needing the source code.
             </p>
+            <p className="text-switch-text-info text-sm leading-relaxed">
+              Note that the patches applied by this tool do <strong>not</strong>{" "}
+              move the <code>ThreadVars</code> structure, which resides at the
+              very end of the region. Effectively, this reduces (squeezes) the
+              available space for TLS slots. While this works for the vast
+              majority of homebrew, applications that use an unusually large
+              number of TLS slots might overwrite critical thread data (and
+              cause crashes - this is an edge case, patching this is out of
+              scope for this tool).
+            </p>
+          </section>
+
+          <section className="space-y-3">
+            <h3 className="text-base font-bold text-switch-text">
+              Why the breakage happened
+            </h3>
+            <div className="text-switch-text-info text-sm leading-relaxed space-y-3">
+              <p>
+                The Thread Local Region is <code>0x200</code> bytes large. The
+                first <code>0x180</code> bytes are effectively reserved for the
+                kernel, while the last <code>0x80</code> bytes (
+                <code>0x180-0x200</code>) are for userland. Official software
+                respects this split, placing its TLS data at offset{" "}
+                <code>0x180</code>.
+              </p>
+              <p>
+                Previous versions of <code>libnx</code> chose to start user TLS
+                slots at <code>0x108</code> (encroaching on the kernel's area)
+                to maximize the number of available slots. This was safe until
+                Firmware 21.0.0, where Nintendo added{" "}
+                <code>cache_maintenance_flag</code> at <code>0x104</code> and{" "}
+                <code>thread_cpu_time</code> at <code>0x108</code>.
+              </p>
+              <p>
+                Now, the kernel writes to <code>0x108</code> on every thread
+                switch, overwriting the TLS data that old homebrew stored there.
+                This corruption causes the crashes.
+              </p>
+              <MemoryLayout />
+            </div>
           </section>
 
           <section className="space-y-3">
@@ -102,18 +196,18 @@ export function AboutPage() {
               <p>
                 It might seem logical for the Homebrew Loader (<code>hbl</code>)
                 to handle this automatically, but that's out of scope for a
-                simple program loader. HBL’s job is to execute code as-is, not
+                simple program loader. HBL's job is to execute code as-is, not
                 to dynamically repair binaries.
               </p>
               <p>
                 Trying to patch memory offsets on the fly is invasive and
-                fragile; if HBL guesses wrong, it could corrupt the entire
+                fragile; if HBL guesses wrong, it could break otherwise
-                homebrew environment. Furthermore, baking a patcher into the
+                functioning homebrew. Furthermore, baking a patcher into the
                 loader sets a bad precedent. The maintainers want to encourage
                 proper fixes (recompilation) rather than relying on permanent
                 "dirty hacks" within the OS itself.{" "}
                 <a
-                  href="https://discord.com/channels/269333940928512010/414949821003202562/1440485257550889221"
+                  href={DIRTY_HACK_DISCORD_SOURCE}
                   target="_blank"
                   rel="noopener noreferrer"
                 >
@@ -123,28 +217,6 @@ export function AboutPage() {
             </div>
           </section>
 
-          <section className="space-y-3">
-            <h3 className="text-base font-bold text-switch-text">
-              Why the breakage happened
-            </h3>
-            <div className="text-switch-text-info text-sm leading-relaxed space-y-3">
-              <p>
-                This isn't a bug; it's a conflict over real estate. In Firmware
-                21.0.0, Nintendo optimized the kernel to write CPU timing data
-                to a specific memory address (<code>usertls + 0x108</code>) on
-                every thread switch.
-              </p>
-              <p>
-                Previous versions of <code>libnx</code> (the homebrew library)
-                assumed this space was unused and stored data there. Official
-                software always respected the reservation, so it wasn't
-                affected. Now that the kernel—and by extension,
-                Atmosphère—actively uses that space, old homebrew gets its
-                memory overwritten, leading to immediate crashes.
-              </p>
-            </div>
-          </section>
-
           <section className="space-y-3">
             <h3 className="text-base font-bold text-switch-text">
               Why Atmosphère didn't add a workaround
@@ -157,13 +229,20 @@ export function AboutPage() {
               </p>
               <p>
                 While the developers have added quiet workarounds in the past
-                (like the FW 19.0.0 debug flags), this specific issue was too
+                (like the{" "}
-                risky to mask. A workaround here would require adding
+                <a
-                conditional logic to the kernel scheduler—the most time-critical
+                  href={FW_19_FIX_SOURCE}
-                part of the system. Adding checks for "broken homebrew" during
+                  target="_blank"
-                every thread switch would add complexity, potentially degrade
+                  rel="noopener noreferrer"
-                performance system-wide, and could even introduce bugs in
+                >
-                official games.
+                  FW 19.0.0 debug flags
+                </a>
+                ), this specific issue was too risky to mask. A workaround here
+                would require adding conditional logic to the kernel
+                scheduler—the most time-critical part of the system. Adding
+                checks for "broken homebrew" during every thread switch would
+                add complexity, potentially degrade performance system-wide, and
+                could even introduce bugs in official games.
               </p>
             </div>
           </section>

src/pages/PatcherPage.tsx

@@ -64,8 +64,16 @@ export function PatcherPage({ appendSuffix }: PatcherPageProps) {
 
         let downloadName = currentFile.name;
         if (appendSuffix) {
-          downloadName = downloadName.replace(/\.nro$/i, "_patched.nro");
+          const extensionMatch = downloadName.match(/\.(nro|ovl)$/i);
-          if (downloadName === currentFile.name) downloadName += "_patched.nro";
+          if (extensionMatch) {
+            const ext = extensionMatch[1].toLowerCase();
+            downloadName = downloadName.replace(
+              new RegExp(`\\.${ext}$`, "i"),
+              `_patched.${ext}`,
+            );
+          } else {
+            downloadName += "_patched";
+          }
         }
 
         a.download = downloadName;