diff --git a/.gitignore b/.gitignore
index c1f3bb7..5706a20 100644
--- a/.gitignore
+++ b/.gitignore
@@ -13,6 +13,7 @@ yarn-debug.log*
 yarn-error.log*
 pnpm-debug.log*
 server.log
+server.log
 
 # Editor directories and files
 .idea
diff --git a/CODE_REVIEW.md b/CODE_REVIEW.md
new file mode 100644
index 0000000..9a65ac6
--- /dev/null
+++ b/CODE_REVIEW.md
@@ -0,0 +1,51 @@
+# Code Review: Matrix Calculator
+
+## Executive Summary
+
+This document provides a comprehensive code review of the **Matrix Calculator**, a client-side web application built with Vue.js 3 and the Composition API. The initial request was to review a full-stack e-commerce application, but this review has been adapted to the actual codebase provided.
+
+The application is well-structured, with a clear separation of concerns between the UI components and the business logic in the composables. It makes good use of modern Vue.js features and provides a solid foundation for further development. However, it has some bugs and is missing key features that would make it production-ready.
+
+This review identifies several areas for improvement, including:
+
+- **Bug Fixes**: The save/load functionality is not persistent.
+- **Error Handling**: The application does not provide user-facing error messages.
+- **Component Refactoring**: The main component is too large and could be broken down into smaller, more reusable components.
+- **Input Validation**: The application does not validate user input, which could lead to unexpected errors.
+
+The following sections provide a detailed analysis of the issues and suggest improvements to address them.
+
+## Critical Issues
+
+### High
+
+- **No user-facing error messages**: When an operation fails, the application logs an error to the console but does not provide any feedback to the user. This can be confusing and frustrating for users who do not have their browser's developer tools open.
+
+### Medium
+
+- **Save/load functionality is not persistent**: The "Save Matrix" and "Load Matrix" buttons use an in-memory variable to store the matrix data. This means that the saved matrix is lost when the page is reloaded.
+- **`MatrixInput.vue` is a "God Component"**: The `MatrixInput.vue` component is responsible for too many things, including state management, UI rendering, and event handling. This makes it difficult to maintain and reuse.
+- **No input validation**: The application does not validate user input, which could lead to unexpected errors. For example, if a user enters a non-numeric value in a matrix cell, the application will throw an error and stop working.
+
+### Low
+
+- **No loading indicators**: The application does not provide any feedback to the user while an operation is in progress. This can be confusing for users who are performing complex operations that take a long time to complete.
+- **No unit tests**: The application does not have any unit tests, which makes it difficult to refactor the code and add new features without introducing regressions.
+
+## Suggested Improvements
+
+### 1. Implement Persistent Save/Load
+
+The `saveMatrix` and `loadMatrix` functions in `src/components/MatrixInput.vue` should be modified to use `window.localStorage` to store the matrix data. This will ensure that the saved matrix is persisted across page reloads.
+
+### 2. Add User-Facing Error Messages
+
+A new `ErrorDisplay.vue` component should be created to display error messages to the user. The `useMatrixOperations.js` composable should be modified to emit an error event when an operation fails, and the `MatrixInput.vue` component should be updated to listen for this event and display the error message in the `ErrorDisplay.vue` component.
+
+### 3. Refactor the `MatrixInput` Component
+
+The `MatrixInput.vue` component should be refactored into smaller, more reusable components. Specifically, the matrix display and results display should be extracted into their own components, `MatrixDisplay.vue` and `ResultsDisplay.vue`. This will improve the organization and reusability of the code.
+
+### 4. Add Input Validation
+
+The `MatrixDisplay.vue` component should be modified to validate user input and ensure that only numeric values are accepted. This can be done by adding an `@input` event handler to the matrix cell `<input>` elements that filters out non-numeric characters.
diff --git a/package-lock.json b/package-lock.json
index 051e633..ab70c34 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -97,7 +97,6 @@
       "integrity": "sha512-BBt3opiCOxUr9euZ5/ro/Xv8/V7yJ5bjYMqG/C1YAo8MIKAnumZalCN+msbci3Pigy4lIQfPUpfMM27HMGaYEA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@ampproject/remapping": "^2.2.0",
         "@babel/code-frame": "^7.24.7",
@@ -3048,7 +3047,6 @@
       "integrity": "sha512-nV7tYQLe7YsTtzFrfOMIHc5N2hp5lHG2rpYr0aNja9rNljdgcPZLyQRb2YRivTHqTv7lI962UXFURcpStHgyFw==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/helper-compilation-targets": "^7.12.16",
         "@soda/friendly-errors-webpack-plugin": "^1.8.0",
@@ -3682,7 +3680,6 @@
       "integrity": "sha512-tcpGyI9zbizT9JbV6oYE477V6mTlXvvi0T0G3SNIYE2apm/G5huBa1+K89VGeovbg+jycCrfhl3ADxErOuO6Jg==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -3739,7 +3736,6 @@
       "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
         "fast-json-stable-stringify": "^2.0.0",
@@ -4272,7 +4268,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "caniuse-lite": "^1.0.30001733",
         "electron-to-chromium": "^1.5.199",
@@ -5025,7 +5020,6 @@
       "integrity": "sha512-CTJ+AEQJjq5NzLga5pE39qdiSV56F8ywCIsqNIRF0r7BDgWsN25aazToqAFg7ZrtA/U016xudB3ffgweORxX7g==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "icss-utils": "^5.1.0",
         "postcss": "^8.4.33",
@@ -5114,7 +5108,6 @@
       "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.3",
         "fast-uri": "^3.0.1",
@@ -5953,7 +5946,6 @@
       "integrity": "sha512-VHZ8gX+EDfz+97jGcgyGCyRia/dPOd6Xh9yPv8Bl1+SoaIwD+a/vlrOmGRUyOYu7MwUhc7CxqeaDZU13S4+EpA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/code-frame": "7.12.11",
         "@eslint/eslintrc": "^0.4.3",
@@ -6140,7 +6132,6 @@
       "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.3",
         "fast-uri": "^3.0.1",
@@ -8787,7 +8778,6 @@
       "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.3",
         "fast-uri": "^3.0.1",
@@ -9724,7 +9714,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.11",
         "picocolors": "^1.1.1",
@@ -12324,7 +12313,6 @@
       "resolved": "https://registry.npmjs.org/vue/-/vue-3.4.36.tgz",
       "integrity": "sha512-mIFvbLgjODfx3Iy1SrxOsiPpDb8Bo3EU+87ioimOZzZTOp15IEdAels70IjBOLO3ZFlLW5AhdwY4dWbXVQKYow==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@vue/compiler-dom": "3.4.36",
         "@vue/compiler-sfc": "3.4.36",
@@ -12615,7 +12603,6 @@
       "integrity": "sha512-Y0m5oEY1LRuwly578VqluorkXbvXKh7U3rLoQCEO04M97ScRr44afGVkI0FQFsXzysk5OgFAxjZAb9rsGQVihA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@types/eslint-scope": "^3.7.3",
         "@types/estree": "^1.0.5",
@@ -12753,7 +12740,6 @@
       "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.3",
         "fast-uri": "^3.0.1",
@@ -12871,7 +12857,6 @@
       "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.3",
         "fast-uri": "^3.0.1",
diff --git a/server.log b/server.log
deleted file mode 100644
index 693e35e..0000000
--- a/server.log
+++ /dev/null
@@ -1,1056 +0,0 @@
-
-> matrix-calculator@0.1.0 serve
-> vue-cli-service serve
-
- INFO  Starting development server...
-[3%] setup (watch run)
-[3%] setup (watch run vue-loader-plugin)
-[3%] setup (watch run ESLintWebpackPlugin_1)
-[3%] setup (watch run webpack-dev-middleware)
-[3%] setup (watch run)
-[4%] setup (normal module factory)
-[4%] setup (normal module factory CaseSensitivePathsPlugin)
-[4%] setup (normal module factory)
-[5%] setup (context module factory)
-[6%] setup (before compile)
-[6%] setup (before compile ProgressPlugin)
-[6%] setup (before compile)
-[7%] setup (compile)
-[7%] setup (compile ExternalsPlugin)
-[7%] setup (compile)
-[8%] setup (compilation)
-[8%] setup (compilation CopyPlugin)
-[8%] setup (compilation ArrayPushCallbackChunkFormatPlugin)
-[8%] setup (compilation JsonpChunkLoadingPlugin)
-[8%] setup (compilation StartupChunkDependenciesPlugin)
-[8%] setup (compilation ImportScriptsChunkLoadingPlugin)
-[8%] setup (compilation FetchCompileWasmPlugin)
-[8%] setup (compilation FetchCompileAsyncWasmPlugin)
-[8%] setup (compilation WorkerPlugin)
-[8%] setup (compilation SplitChunksPlugin)
-[8%] setup (compilation ResolverCachePlugin)
-[8%] setup (compilation HtmlWebpackPlugin)
-[8%] setup (compilation)
-[9%] setup (compilation)
-[9%] setup (compilation vue-loader-plugin)
-[9%] setup (compilation DefinePlugin)
-[9%] setup (compilation ProgressPlugin)
-[9%] setup (compilation EntryPlugin)
-[9%] setup (compilation ChunkPrefetchPreloadPlugin)
-[9%] setup (compilation ModuleInfoHeaderPlugin)
-[9%] setup (compilation EvalSourceMapDevToolPlugin)
-[9%] setup (compilation JavascriptModulesPlugin)
-[9%] setup (compilation JsonModulesPlugin)
-[9%] setup (compilation AssetModulesPlugin)
-[9%] setup (compilation EntryPlugin)
-[9%] setup (compilation RuntimePlugin)
-[9%] setup (compilation InferAsyncModulesPlugin)
-[9%] setup (compilation DataUriPlugin)
-[9%] setup (compilation FileUriPlugin)
-[9%] setup (compilation CompatibilityPlugin)
-[9%] setup (compilation HarmonyModulesPlugin)
-[9%] setup (compilation AMDPlugin)
-[9%] setup (compilation RequireJsStuffPlugin)
-[9%] setup (compilation CommonJsPlugin)
-[9%] setup (compilation LoaderPlugin)
-[9%] setup (compilation NodeStuffPlugin)
-[9%] setup (compilation APIPlugin)
-[9%] setup (compilation ExportsInfoApiPlugin)
-[9%] setup (compilation WebpackIsIncludedPlugin)
-[9%] setup (compilation ConstPlugin)
-[9%] setup (compilation UseStrictPlugin)
-[9%] setup (compilation RequireIncludePlugin)
-[9%] setup (compilation RequireEnsurePlugin)
-[9%] setup (compilation RequireContextPlugin)
-[9%] setup (compilation ImportPlugin)
-[9%] setup (compilation ImportMetaContextPlugin)
-[9%] setup (compilation SystemPlugin)
-[9%] setup (compilation ImportMetaPlugin)
-[9%] setup (compilation URLPlugin)
-[9%] setup (compilation DefaultStatsFactoryPlugin)
-[9%] setup (compilation DefaultStatsPresetPlugin)
-[9%] setup (compilation DefaultStatsPrinterPlugin)
-[9%] setup (compilation JavascriptMetaInfoPlugin)
-[9%] setup (compilation EnsureChunkConditionsPlugin)
-[9%] setup (compilation RemoveEmptyChunksPlugin)
-[9%] setup (compilation MergeDuplicateChunksPlugin)
-[9%] setup (compilation SideEffectsFlagPlugin)
-[9%] setup (compilation FlagDependencyExportsPlugin)
-[9%] setup (compilation NamedModuleIdsPlugin)
-[9%] setup (compilation NamedChunkIdsPlugin)
-[9%] setup (compilation DefinePlugin)
-[9%] setup (compilation TemplatedPathPlugin)
-[9%] setup (compilation RecordIdsPlugin)
-[9%] setup (compilation WarnCaseSensitiveModulesPlugin)
-[9%] setup (compilation EntryPlugin)
-[9%] setup (compilation ProvidePlugin)
-[9%] setup (compilation HotModuleReplacementPlugin)
-[9%] setup (compilation ProgressPlugin)
-[9%] setup (compilation ESLintWebpackPlugin_1)
-[9%] setup (compilation)
-[10%] building
-[10%] building (0/0 modules)
-[10%] building (import loader babel-loader/lib/index.js)
-[10%] building (0/1 modules)
-[24%] building (1/4 modules)
-[24%] building (import loader vue-loader/dist/index.js)
-[24%] building (3/17 modules)
-[24%] building (import loader vue-style-loader/index.js)
-[24%] building (import loader css-loader/dist/cjs.js)
-[24%] building (import loader postcss-loader/dist/cjs.js)
-[24%] building (3/18 modules)
-[24%] building (import loader vue-loader/dist/pitcher.js)
-[24%] building (7/29 modules)
-[24%] building (import loader vue-loader/dist/templateLoader.js)
-[24%] building (7/29 modules)
-[24%] building (22/68 modules)
-[24%] building (import loader vue-loader/dist/stylePostLoader.js)
-[24%] building (29/93 modules)
-[38%] building (32/93 modules)
-[@vue/compiler-sfc] `defineProps` is a compiler macro and no longer needs to be imported.
-
-[@vue/compiler-sfc] `defineEmits` is a compiler macro and no longer needs to be imported.
-
-[38%] building (100/152 modules)
-[51%] building (113/152 modules)
-[51%] building (154/183 modules)
-[51%] building (164/849 modules)
-[51%] building (180/877 modules)
-[51%] building (197/890 modules)
-[51%] building (220/913 modules)
-[51%] building (226/1157 modules)
-[51%] building (254/1157 modules)
-[51%] building (266/1157 modules)
-[51%] building (700/1160 modules)
-[51%] building (1000/1183 modules)
-[65%] building (1213/1213 modules)
-[65%] building
-[69%] building (finish)
-[70%] sealing (finish module graph)
-[70%] sealing (finish module graph ResolverCachePlugin)
-[70%] sealing (finish module graph InferAsyncModulesPlugin)
-[70%] sealing (finish module graph FlagDependencyExportsPlugin)
-[70%] sealing (finish module graph ESLintWebpackPlugin_1)
-[70%] sealing (finish module graph)
-[71%] sealing (plugins)
-[71%] sealing (plugins WarnCaseSensitiveModulesPlugin)
-[71%] sealing (plugins)
-[71%] sealing (dependencies optimization)
-[71%] sealing (dependencies optimization SideEffectsFlagPlugin)
-[71%] sealing (dependencies optimization)
-[72%] sealing (after dependencies optimization)
-[73%] sealing (chunk graph)
-[73%] sealing (after chunk graph)
-[74%] sealing (optimizing)
-[74%] sealing (module optimization)
-[75%] sealing (after module optimization)
-[76%] sealing (chunk optimization)
-[76%] sealing (chunk optimization EnsureChunkConditionsPlugin)
-[76%] sealing (chunk optimization RemoveEmptyChunksPlugin)
-[76%] sealing (chunk optimization MergeDuplicateChunksPlugin)
-[76%] sealing (chunk optimization SplitChunksPlugin)
-[76%] sealing (chunk optimization RemoveEmptyChunksPlugin)
-[76%] sealing (chunk optimization)
-[76%] sealing (after chunk optimization)
-[77%] sealing (module and chunk tree optimization)
-[77%] sealing (module and chunk tree optimization PersistentChildCompilerSinglet
-onPlugin)
-[77%] sealing (module and chunk tree optimization)
-[78%] sealing (after module and chunk tree optimization)
-[78%] sealing (chunk modules optimization)
-[79%] sealing (after chunk modules optimization)
-[80%] sealing (module reviving)
-[80%] sealing (module reviving RecordIdsPlugin)
-[80%] sealing (module reviving)
-[80%] sealing (before module ids)
-[81%] sealing (module ids)
-[81%] sealing (module ids NamedModuleIdsPlugin)
-[81%] sealing (module ids)
-[82%] sealing (module id optimization)
-[82%] sealing (module id optimization)
-[83%] sealing (chunk reviving)
-[83%] sealing (chunk reviving RecordIdsPlugin)
-[83%] sealing (chunk reviving)
-[83%] sealing (before chunk ids)
-[84%] sealing (chunk ids)
-[84%] sealing (chunk ids NamedChunkIdsPlugin)
-[84%] sealing (chunk ids)
-[85%] sealing (chunk id optimization)
-[85%] sealing (after chunk id optimization)
-[86%] sealing (record modules)
-[86%] sealing (record modules RecordIdsPlugin)
-[86%] sealing (record modules)
-[87%] sealing (record chunks)
-[87%] sealing (record chunks RecordIdsPlugin)
-[87%] sealing (record chunks)
-[87%] sealing (module hashing)
-[88%] sealing (code generation)
-[89%] sealing (runtime requirements)
-[89%] sealing (hashing)
-[90%] sealing (after hashing)
-[91%] sealing (record hash)
-[91%] sealing (module assets processing)
-[92%] sealing (chunk assets processing)
-[92%] sealing (asset processing)
-[92%] sealing (asset processing copy-webpack-plugin)
-[92%] sealing (asset processing HotModuleReplacementPlugin)
-[92%] sealing (asset processing ESLintWebpackPlugin_1)
-[92%] sealing (asset processing PersistentChildCompilerSingletonPlugin)
-[92%] sealing (asset processing HtmlWebpackPlugin)
-[92%] sealing (asset processing)
-[93%] sealing (after asset optimization)
-[94%] sealing (recording)
-[94%] sealing (recording HotModuleReplacementPlugin)
-[94%] sealing (recording)
-[94%] sealing (after seal)
-[95%] emitting (emit)
-[98%] emitting (after emit)
-Build finished at 10:02:28 by 0.000s
-Build finished at 10:02:28 by 0.000s
-Build finished at 10:02:28 by 0.000s
- DONE  Compiled successfully in 17406ms10:02:28 AM
-
-Build finished at 10:02:29 by 0.000s
-
-  App running at:
-  - Local:   http://localhost:8080/
-  - Network: http://192.168.0.2:8080/
-
-  Note that the development build is not optimized.
-  To create a production build, run npm run build.
-
-Build finished at 10:02:29 by 0.000s
-Build finished at 10:02:29 by 0.000s
-Build finished at 10:02:29 by 0.000s
-Build finished at 10:02:29 by 0.000s
-Build finished at 10:02:29 by 0.000s
-Build finished at 10:02:29 by 0.000s
-Build finished at 10:02:29 by 0.000s
-Build finished at 10:02:29 by 0.000s
-
-[1%] cache (end idle)
-[3%] setup (watch run)
-[3%] setup (watch run vue-loader-plugin)
-[3%] setup (watch run ESLintWebpackPlugin_1)
-[3%] setup (watch run webpack-dev-middleware)
-[3%] setup (watch run)
-[4%] setup (normal module factory)
-[4%] setup (normal module factory CaseSensitivePathsPlugin)
-[4%] setup (normal module factory)
-[5%] setup (context module factory)
-[6%] setup (before compile)
-[6%] setup (before compile ProgressPlugin)
-[6%] setup (before compile)
-[7%] setup (compile)
-[7%] setup (compile ExternalsPlugin)
-[7%] setup (compile)
-[8%] setup (compilation)
-[8%] setup (compilation CopyPlugin)
-[8%] setup (compilation ArrayPushCallbackChunkFormatPlugin)
-[8%] setup (compilation JsonpChunkLoadingPlugin)
-[8%] setup (compilation StartupChunkDependenciesPlugin)
-[8%] setup (compilation ImportScriptsChunkLoadingPlugin)
-[8%] setup (compilation FetchCompileWasmPlugin)
-[8%] setup (compilation FetchCompileAsyncWasmPlugin)
-[8%] setup (compilation WorkerPlugin)
-[8%] setup (compilation SplitChunksPlugin)
-[8%] setup (compilation ResolverCachePlugin)
-[8%] setup (compilation HtmlWebpackPlugin)
-[8%] setup (compilation)
-[9%] setup (compilation)
-[9%] setup (compilation vue-loader-plugin)
-[9%] setup (compilation DefinePlugin)
-[9%] setup (compilation ProgressPlugin)
-[9%] setup (compilation EntryPlugin)
-[9%] setup (compilation ChunkPrefetchPreloadPlugin)
-[9%] setup (compilation ModuleInfoHeaderPlugin)
-[9%] setup (compilation EvalSourceMapDevToolPlugin)
-[9%] setup (compilation JavascriptModulesPlugin)
-[9%] setup (compilation JsonModulesPlugin)
-[9%] setup (compilation AssetModulesPlugin)
-[9%] setup (compilation EntryPlugin)
-[9%] setup (compilation RuntimePlugin)
-[9%] setup (compilation InferAsyncModulesPlugin)
-[9%] setup (compilation DataUriPlugin)
-[9%] setup (compilation FileUriPlugin)
-[9%] setup (compilation CompatibilityPlugin)
-[9%] setup (compilation HarmonyModulesPlugin)
-[9%] setup (compilation AMDPlugin)
-[9%] setup (compilation RequireJsStuffPlugin)
-[9%] setup (compilation CommonJsPlugin)
-[9%] setup (compilation LoaderPlugin)
-[9%] setup (compilation NodeStuffPlugin)
-[9%] setup (compilation APIPlugin)
-[9%] setup (compilation ExportsInfoApiPlugin)
-[9%] setup (compilation WebpackIsIncludedPlugin)
-[9%] setup (compilation ConstPlugin)
-[9%] setup (compilation UseStrictPlugin)
-[9%] setup (compilation RequireIncludePlugin)
-[9%] setup (compilation RequireEnsurePlugin)
-[9%] setup (compilation RequireContextPlugin)
-[9%] setup (compilation ImportPlugin)
-[9%] setup (compilation ImportMetaContextPlugin)
-[9%] setup (compilation SystemPlugin)
-[9%] setup (compilation ImportMetaPlugin)
-[9%] setup (compilation URLPlugin)
-[9%] setup (compilation DefaultStatsFactoryPlugin)
-[9%] setup (compilation DefaultStatsPresetPlugin)
-[9%] setup (compilation DefaultStatsPrinterPlugin)
-[9%] setup (compilation JavascriptMetaInfoPlugin)
-[9%] setup (compilation EnsureChunkConditionsPlugin)
-[9%] setup (compilation RemoveEmptyChunksPlugin)
-[9%] setup (compilation MergeDuplicateChunksPlugin)
-[9%] setup (compilation SideEffectsFlagPlugin)
-[9%] setup (compilation FlagDependencyExportsPlugin)
-[9%] setup (compilation NamedModuleIdsPlugin)
-[9%] setup (compilation NamedChunkIdsPlugin)
-[9%] setup (compilation DefinePlugin)
-[9%] setup (compilation TemplatedPathPlugin)
-[9%] setup (compilation RecordIdsPlugin)
-[9%] setup (compilation WarnCaseSensitiveModulesPlugin)
-[9%] setup (compilation EntryPlugin)
-[9%] setup (compilation ProvidePlugin)
-[9%] setup (compilation HotModuleReplacementPlugin)
-[9%] setup (compilation ProgressPlugin)
-[9%] setup (compilation ESLintWebpackPlugin_1)
-[9%] setup (compilation)
-[10%] building
-[10%] building (0/0 modules)
-[24%] building (1/3 modules)
-[38%] building (20/8 modules)
-[38%] building (import loader css-loader/dist/cjs.js)
-[38%] building (import loader postcss-loader/dist/cjs.js)
-[38%] building (44/11 modules)
-[51%] building (148/18 modules)
-[65%] building (1213/31 modules)
-[65%] building
-[69%] building (finish)
-[70%] sealing (finish module graph)
-[70%] sealing (finish module graph ResolverCachePlugin)
-[70%] sealing (finish module graph InferAsyncModulesPlugin)
-[70%] sealing (finish module graph FlagDependencyExportsPlugin)
-[70%] sealing (finish module graph ESLintWebpackPlugin_1)
-[70%] sealing (finish module graph)
-[71%] sealing (plugins)
-[71%] sealing (plugins WarnCaseSensitiveModulesPlugin)
-[71%] sealing (plugins)
-[71%] sealing (dependencies optimization)
-[71%] sealing (dependencies optimization SideEffectsFlagPlugin)
-[71%] sealing (dependencies optimization)
-[72%] sealing (after dependencies optimization)
-[73%] sealing (chunk graph)
-[73%] sealing (after chunk graph)
-[74%] sealing (optimizing)
-[74%] sealing (module optimization)
-[75%] sealing (after module optimization)
-[76%] sealing (chunk optimization)
-[76%] sealing (chunk optimization EnsureChunkConditionsPlugin)
-[76%] sealing (chunk optimization RemoveEmptyChunksPlugin)
-[76%] sealing (chunk optimization MergeDuplicateChunksPlugin)
-[76%] sealing (chunk optimization SplitChunksPlugin)
-[76%] sealing (chunk optimization RemoveEmptyChunksPlugin)
-[76%] sealing (chunk optimization)
-[76%] sealing (after chunk optimization)
-[77%] sealing (module and chunk tree optimization)
-[77%] sealing (module and chunk tree optimization PersistentChildCompilerSinglet
-onPlugin)
-[77%] sealing (module and chunk tree optimization)
-[78%] sealing (after module and chunk tree optimization)
-[78%] sealing (chunk modules optimization)
-[79%] sealing (after chunk modules optimization)
-[80%] sealing (module reviving)
-[80%] sealing (module reviving RecordIdsPlugin)
-[80%] sealing (module reviving)
-[80%] sealing (before module ids)
-[81%] sealing (module ids)
-[81%] sealing (module ids NamedModuleIdsPlugin)
-[81%] sealing (module ids)
-[82%] sealing (module id optimization)
-[82%] sealing (module id optimization)
-[83%] sealing (chunk reviving)
-[83%] sealing (chunk reviving RecordIdsPlugin)
-[83%] sealing (chunk reviving)
-[83%] sealing (before chunk ids)
-[84%] sealing (chunk ids)
-[84%] sealing (chunk ids NamedChunkIdsPlugin)
-[84%] sealing (chunk ids)
-[85%] sealing (chunk id optimization)
-[85%] sealing (after chunk id optimization)
-[86%] sealing (record modules)
-[86%] sealing (record modules RecordIdsPlugin)
-[86%] sealing (record modules)
-[87%] sealing (record chunks)
-[87%] sealing (record chunks RecordIdsPlugin)
-[87%] sealing (record chunks)
-[87%] sealing (module hashing)
-[88%] sealing (code generation)
-[89%] sealing (runtime requirements)
-[89%] sealing (hashing)
-[90%] sealing (after hashing)
-[91%] sealing (record hash)
-[91%] sealing (module assets processing)
-[92%] sealing (chunk assets processing)
-[92%] sealing (asset processing)
-[92%] sealing (asset processing copy-webpack-plugin)
-[92%] sealing (asset processing HotModuleReplacementPlugin)
-[92%] sealing (asset processing ESLintWebpackPlugin_1)
-[92%] sealing (asset processing PersistentChildCompilerSingletonPlugin)
-[92%] sealing (asset processing HtmlWebpackPlugin)
-[92%] sealing (asset processing)
-[93%] sealing (after asset optimization)
-[94%] sealing (recording)
-[94%] sealing (recording HotModuleReplacementPlugin)
-[94%] sealing (recording)
-[94%] sealing (after seal)
-[95%] emitting (emit)
-[98%] emitting (after emit)
-Build finished at 10:02:29 by 0.000s
-Build finished at 10:02:29 by 0.000s
-Build finished at 10:02:29 by 0.000s
- DONE  Compiled successfully in 278ms10:02:29 AM
-
-Build finished at 10:02:29 by 0.000s
-
-  App running at:
-  - Local:   http://localhost:8080/
-  - Network: http://192.168.0.2:8080/
-
-Build finished at 10:02:29 by 0.000s
-Build finished at 10:02:29 by 0.000s
-Build finished at 10:02:29 by 0.000s
-Build finished at 10:02:29 by 0.000s
-Build finished at 10:02:29 by 0.000s
-Build finished at 10:02:29 by 0.000s
-Build finished at 10:02:29 by 0.000s
-Build finished at 10:02:29 by 0.000s
- WAIT  Compiling...10:04:34 AM
-
-Compiling...
-
-[1%] cache (end idle)
-[3%] setup (watch run)
-[3%] setup (watch run vue-loader-plugin)
-[3%] setup (watch run ESLintWebpackPlugin_1)
-[3%] setup (watch run webpack-dev-middleware)
-[3%] setup (watch run)
-[4%] setup (normal module factory)
-[4%] setup (normal module factory CaseSensitivePathsPlugin)
-[4%] setup (normal module factory)
-[5%] setup (context module factory)
-[6%] setup (before compile)
-[6%] setup (before compile ProgressPlugin)
-[6%] setup (before compile)
-[7%] setup (compile)
-[7%] setup (compile ExternalsPlugin)
-[7%] setup (compile)
-[8%] setup (compilation)
-[8%] setup (compilation CopyPlugin)
-[8%] setup (compilation ArrayPushCallbackChunkFormatPlugin)
-[8%] setup (compilation JsonpChunkLoadingPlugin)
-[8%] setup (compilation StartupChunkDependenciesPlugin)
-[8%] setup (compilation ImportScriptsChunkLoadingPlugin)
-[8%] setup (compilation FetchCompileWasmPlugin)
-[8%] setup (compilation FetchCompileAsyncWasmPlugin)
-[8%] setup (compilation WorkerPlugin)
-[8%] setup (compilation SplitChunksPlugin)
-[8%] setup (compilation ResolverCachePlugin)
-[8%] setup (compilation HtmlWebpackPlugin)
-[8%] setup (compilation)
-[9%] setup (compilation)
-[9%] setup (compilation vue-loader-plugin)
-[9%] setup (compilation DefinePlugin)
-[9%] setup (compilation ProgressPlugin)
-[9%] setup (compilation EntryPlugin)
-[9%] setup (compilation ChunkPrefetchPreloadPlugin)
-[9%] setup (compilation ModuleInfoHeaderPlugin)
-[9%] setup (compilation EvalSourceMapDevToolPlugin)
-[9%] setup (compilation JavascriptModulesPlugin)
-[9%] setup (compilation JsonModulesPlugin)
-[9%] setup (compilation AssetModulesPlugin)
-[9%] setup (compilation EntryPlugin)
-[9%] setup (compilation RuntimePlugin)
-[9%] setup (compilation InferAsyncModulesPlugin)
-[9%] setup (compilation DataUriPlugin)
-[9%] setup (compilation FileUriPlugin)
-[9%] setup (compilation CompatibilityPlugin)
-[9%] setup (compilation HarmonyModulesPlugin)
-[9%] setup (compilation AMDPlugin)
-[9%] setup (compilation RequireJsStuffPlugin)
-[9%] setup (compilation CommonJsPlugin)
-[9%] setup (compilation LoaderPlugin)
-[9%] setup (compilation NodeStuffPlugin)
-[9%] setup (compilation APIPlugin)
-[9%] setup (compilation ExportsInfoApiPlugin)
-[9%] setup (compilation WebpackIsIncludedPlugin)
-[9%] setup (compilation ConstPlugin)
-[9%] setup (compilation UseStrictPlugin)
-[9%] setup (compilation RequireIncludePlugin)
-[9%] setup (compilation RequireEnsurePlugin)
-[9%] setup (compilation RequireContextPlugin)
-[9%] setup (compilation ImportPlugin)
-[9%] setup (compilation ImportMetaContextPlugin)
-[9%] setup (compilation SystemPlugin)
-[9%] setup (compilation ImportMetaPlugin)
-[9%] setup (compilation URLPlugin)
-[9%] setup (compilation DefaultStatsFactoryPlugin)
-[9%] setup (compilation DefaultStatsPresetPlugin)
-[9%] setup (compilation DefaultStatsPrinterPlugin)
-[9%] setup (compilation JavascriptMetaInfoPlugin)
-[9%] setup (compilation EnsureChunkConditionsPlugin)
-[9%] setup (compilation RemoveEmptyChunksPlugin)
-[9%] setup (compilation MergeDuplicateChunksPlugin)
-[9%] setup (compilation SideEffectsFlagPlugin)
-[9%] setup (compilation FlagDependencyExportsPlugin)
-[9%] setup (compilation NamedModuleIdsPlugin)
-[9%] setup (compilation NamedChunkIdsPlugin)
-[9%] setup (compilation DefinePlugin)
-[9%] setup (compilation TemplatedPathPlugin)
-[9%] setup (compilation RecordIdsPlugin)
-[9%] setup (compilation WarnCaseSensitiveModulesPlugin)
-[9%] setup (compilation EntryPlugin)
-[9%] setup (compilation ProvidePlugin)
-[9%] setup (compilation HotModuleReplacementPlugin)
-[9%] setup (compilation ProgressPlugin)
-[9%] setup (compilation ESLintWebpackPlugin_1)
-[9%] setup (compilation)
-[10%] building
-[10%] building (0/0 modules)
-[24%] building (1/4 modules)
-[24%] building (import loader css-loader/dist/cjs.js)
-[24%] building (import loader postcss-loader/dist/cjs.js)
-[24%] building (26/11 modules)
-[38%] building (37/11 modules)
-[51%] building (137/11 modules)
-[51%] building (import loader vue-loader/dist/index.js)
-[51%] building (148/12 modules)
-[51%] building (import loader babel-loader/lib/index.js)
-[51%] building (import loader vue-loader/dist/templateLoader.js)
-[51%] building (148/19 modules)
-[51%] building (import loader vue-loader/dist/stylePostLoader.js)
-[51%] building (148/20 modules)
-[65%] building (1213/34 modules)
-[65%] building
-[69%] building (finish)
-[70%] sealing (finish module graph)
-[70%] sealing (finish module graph ResolverCachePlugin)
-[70%] sealing (finish module graph InferAsyncModulesPlugin)
-[70%] sealing (finish module graph FlagDependencyExportsPlugin)
-[70%] sealing (finish module graph ESLintWebpackPlugin_1)
-[70%] sealing (finish module graph)
-[71%] sealing (plugins)
-[71%] sealing (plugins WarnCaseSensitiveModulesPlugin)
-[71%] sealing (plugins)
-[71%] sealing (dependencies optimization)
-[71%] sealing (dependencies optimization SideEffectsFlagPlugin)
-[71%] sealing (dependencies optimization)
-[72%] sealing (after dependencies optimization)
-[73%] sealing (chunk graph)
-[73%] sealing (after chunk graph)
-[74%] sealing (optimizing)
-[74%] sealing (module optimization)
-[75%] sealing (after module optimization)
-[76%] sealing (chunk optimization)
-[76%] sealing (chunk optimization EnsureChunkConditionsPlugin)
-[76%] sealing (chunk optimization RemoveEmptyChunksPlugin)
-[76%] sealing (chunk optimization MergeDuplicateChunksPlugin)
-[76%] sealing (chunk optimization SplitChunksPlugin)
-[76%] sealing (chunk optimization RemoveEmptyChunksPlugin)
-[76%] sealing (chunk optimization)
-[76%] sealing (after chunk optimization)
-[77%] sealing (module and chunk tree optimization)
-[77%] sealing (module and chunk tree optimization PersistentChildCompilerSinglet
-onPlugin)
-[77%] sealing (module and chunk tree optimization)
-[78%] sealing (after module and chunk tree optimization)
-[78%] sealing (chunk modules optimization)
-[79%] sealing (after chunk modules optimization)
-[80%] sealing (module reviving)
-[80%] sealing (module reviving RecordIdsPlugin)
-[80%] sealing (module reviving)
-[80%] sealing (before module ids)
-[81%] sealing (module ids)
-[81%] sealing (module ids NamedModuleIdsPlugin)
-[81%] sealing (module ids)
-[82%] sealing (module id optimization)
-[82%] sealing (module id optimization)
-[83%] sealing (chunk reviving)
-[83%] sealing (chunk reviving RecordIdsPlugin)
-[83%] sealing (chunk reviving)
-[83%] sealing (before chunk ids)
-[84%] sealing (chunk ids)
-[84%] sealing (chunk ids NamedChunkIdsPlugin)
-[84%] sealing (chunk ids)
-[85%] sealing (chunk id optimization)
-[85%] sealing (after chunk id optimization)
-[86%] sealing (record modules)
-[86%] sealing (record modules RecordIdsPlugin)
-[86%] sealing (record modules)
-[87%] sealing (record chunks)
-[87%] sealing (record chunks RecordIdsPlugin)
-[87%] sealing (record chunks)
-[87%] sealing (module hashing)
-[88%] sealing (code generation)
-[89%] sealing (runtime requirements)
-[89%] sealing (hashing)
-[90%] sealing (after hashing)
-[91%] sealing (record hash)
-[91%] sealing (module assets processing)
-[92%] sealing (chunk assets processing)
-[92%] sealing (asset processing)
-[92%] sealing (asset processing copy-webpack-plugin)
-[92%] sealing (asset processing HotModuleReplacementPlugin)
-[92%] sealing (asset processing ESLintWebpackPlugin_1)
-[92%] sealing (asset processing PersistentChildCompilerSingletonPlugin)
-[92%] sealing (asset processing HtmlWebpackPlugin)
-[92%] sealing (asset processing)
-[93%] sealing (after asset optimization)
-[94%] sealing (recording)
-[94%] sealing (recording HotModuleReplacementPlugin)
-[94%] sealing (recording)
-[94%] sealing (after seal)
-[95%] emitting (emit)
-[98%] emitting (after emit)
-Build finished at 10:04:35 by 0.000s
-Build finished at 10:04:35 by 0.000s
-Build finished at 10:04:35 by 0.000s
- ERROR  Failed to compile with 1 error10:04:35 AM
-
-[eslint]
-/app/src/components/MatrixInput.vue
-  174:11  error  'savedMatrix' is assigned a value but never used  no-unused-vars
-
-✖ 1 problem (1 error, 0 warnings)
-
-
-You may use special comments to disable some warnings.
-Use // eslint-disable-next-line to ignore the next line.
-Use /* eslint-disable */ to ignore all warnings in a file.
-Build finished at 10:04:35 by 0.000s
-Build finished at 10:04:35 by 0.000s
-Build finished at 10:04:35 by 0.000s
-Build finished at 10:04:35 by 0.000s
-Build finished at 10:04:35 by 0.000s
-Build finished at 10:04:35 by 0.000s
-Build finished at 10:04:35 by 0.000s
-Build finished at 10:04:35 by 0.000s
-Build finished at 10:04:35 by 0.000s
-ERROR in [eslint]
-/app/src/components/MatrixInput.vue
-  174:11  error  'savedMatrix' is assigned a value but never used  no-unused-vars
-
-✖ 1 problem (1 error, 0 warnings)
-
-webpack compiled with 1 error
- WAIT  Compiling...10:04:43 AM
-
-Compiling...
-
-[1%] cache (end idle)
-[3%] setup (watch run)
-[3%] setup (watch run vue-loader-plugin)
-[3%] setup (watch run ESLintWebpackPlugin_1)
-[3%] setup (watch run webpack-dev-middleware)
-[3%] setup (watch run)
-[4%] setup (normal module factory)
-[4%] setup (normal module factory CaseSensitivePathsPlugin)
-[4%] setup (normal module factory)
-[5%] setup (context module factory)
-[6%] setup (before compile)
-[6%] setup (before compile ProgressPlugin)
-[6%] setup (before compile)
-[7%] setup (compile)
-[7%] setup (compile ExternalsPlugin)
-[7%] setup (compile)
-[8%] setup (compilation)
-[8%] setup (compilation CopyPlugin)
-[8%] setup (compilation ArrayPushCallbackChunkFormatPlugin)
-[8%] setup (compilation JsonpChunkLoadingPlugin)
-[8%] setup (compilation StartupChunkDependenciesPlugin)
-[8%] setup (compilation ImportScriptsChunkLoadingPlugin)
-[8%] setup (compilation FetchCompileWasmPlugin)
-[8%] setup (compilation FetchCompileAsyncWasmPlugin)
-[8%] setup (compilation WorkerPlugin)
-[8%] setup (compilation SplitChunksPlugin)
-[8%] setup (compilation ResolverCachePlugin)
-[8%] setup (compilation HtmlWebpackPlugin)
-[8%] setup (compilation)
-[9%] setup (compilation)
-[9%] setup (compilation vue-loader-plugin)
-[9%] setup (compilation DefinePlugin)
-[9%] setup (compilation ProgressPlugin)
-[9%] setup (compilation EntryPlugin)
-[9%] setup (compilation ChunkPrefetchPreloadPlugin)
-[9%] setup (compilation ModuleInfoHeaderPlugin)
-[9%] setup (compilation EvalSourceMapDevToolPlugin)
-[9%] setup (compilation JavascriptModulesPlugin)
-[9%] setup (compilation JsonModulesPlugin)
-[9%] setup (compilation AssetModulesPlugin)
-[9%] setup (compilation EntryPlugin)
-[9%] setup (compilation RuntimePlugin)
-[9%] setup (compilation InferAsyncModulesPlugin)
-[9%] setup (compilation DataUriPlugin)
-[9%] setup (compilation FileUriPlugin)
-[9%] setup (compilation CompatibilityPlugin)
-[9%] setup (compilation HarmonyModulesPlugin)
-[9%] setup (compilation AMDPlugin)
-[9%] setup (compilation RequireJsStuffPlugin)
-[9%] setup (compilation CommonJsPlugin)
-[9%] setup (compilation LoaderPlugin)
-[9%] setup (compilation NodeStuffPlugin)
-[9%] setup (compilation APIPlugin)
-[9%] setup (compilation ExportsInfoApiPlugin)
-[9%] setup (compilation WebpackIsIncludedPlugin)
-[9%] setup (compilation ConstPlugin)
-[9%] setup (compilation UseStrictPlugin)
-[9%] setup (compilation RequireIncludePlugin)
-[9%] setup (compilation RequireEnsurePlugin)
-[9%] setup (compilation RequireContextPlugin)
-[9%] setup (compilation ImportPlugin)
-[9%] setup (compilation ImportMetaContextPlugin)
-[9%] setup (compilation SystemPlugin)
-[9%] setup (compilation ImportMetaPlugin)
-[9%] setup (compilation URLPlugin)
-[9%] setup (compilation DefaultStatsFactoryPlugin)
-[9%] setup (compilation DefaultStatsPresetPlugin)
-[9%] setup (compilation DefaultStatsPrinterPlugin)
-[9%] setup (compilation JavascriptMetaInfoPlugin)
-[9%] setup (compilation EnsureChunkConditionsPlugin)
-[9%] setup (compilation RemoveEmptyChunksPlugin)
-[9%] setup (compilation MergeDuplicateChunksPlugin)
-[9%] setup (compilation SideEffectsFlagPlugin)
-[9%] setup (compilation FlagDependencyExportsPlugin)
-[9%] setup (compilation NamedModuleIdsPlugin)
-[9%] setup (compilation NamedChunkIdsPlugin)
-[9%] setup (compilation DefinePlugin)
-[9%] setup (compilation TemplatedPathPlugin)
-[9%] setup (compilation RecordIdsPlugin)
-[9%] setup (compilation WarnCaseSensitiveModulesPlugin)
-[9%] setup (compilation EntryPlugin)
-[9%] setup (compilation ProvidePlugin)
-[9%] setup (compilation HotModuleReplacementPlugin)
-[9%] setup (compilation ProgressPlugin)
-[9%] setup (compilation ESLintWebpackPlugin_1)
-[9%] setup (compilation)
-[10%] building
-[10%] building (0/0 modules)
-[24%] building (7/5 modules)
-[38%] building (34/8 modules)
-[38%] building (import loader css-loader/dist/cjs.js)
-[38%] building (import loader postcss-loader/dist/cjs.js)
-[38%] building (61/11 modules)
-[51%] building (148/11 modules)
-[51%] building (import loader vue-loader/dist/index.js)
-[51%] building (148/12 modules)
-[51%] building (import loader babel-loader/lib/index.js)
-[51%] building (import loader vue-loader/dist/templateLoader.js)
-[51%] building (148/19 modules)
-[51%] building (import loader vue-loader/dist/stylePostLoader.js)
-[51%] building (148/20 modules)
-[65%] building (1213/34 modules)
-[65%] building
-[69%] building (finish)
-[70%] sealing (finish module graph)
-[70%] sealing (finish module graph ResolverCachePlugin)
-[70%] sealing (finish module graph InferAsyncModulesPlugin)
-[70%] sealing (finish module graph FlagDependencyExportsPlugin)
-[70%] sealing (finish module graph ESLintWebpackPlugin_1)
-[70%] sealing (finish module graph)
-[71%] sealing (plugins)
-[71%] sealing (plugins WarnCaseSensitiveModulesPlugin)
-[71%] sealing (plugins)
-[71%] sealing (dependencies optimization)
-[71%] sealing (dependencies optimization SideEffectsFlagPlugin)
-[71%] sealing (dependencies optimization)
-[72%] sealing (after dependencies optimization)
-[73%] sealing (chunk graph)
-[73%] sealing (after chunk graph)
-[74%] sealing (optimizing)
-[74%] sealing (module optimization)
-[75%] sealing (after module optimization)
-[76%] sealing (chunk optimization)
-[76%] sealing (chunk optimization EnsureChunkConditionsPlugin)
-[76%] sealing (chunk optimization RemoveEmptyChunksPlugin)
-[76%] sealing (chunk optimization MergeDuplicateChunksPlugin)
-[76%] sealing (chunk optimization SplitChunksPlugin)
-[76%] sealing (chunk optimization RemoveEmptyChunksPlugin)
-[76%] sealing (chunk optimization)
-[76%] sealing (after chunk optimization)
-[77%] sealing (module and chunk tree optimization)
-[77%] sealing (module and chunk tree optimization PersistentChildCompilerSinglet
-onPlugin)
-[77%] sealing (module and chunk tree optimization)
-[78%] sealing (after module and chunk tree optimization)
-[78%] sealing (chunk modules optimization)
-[79%] sealing (after chunk modules optimization)
-[80%] sealing (module reviving)
-[80%] sealing (module reviving RecordIdsPlugin)
-[80%] sealing (module reviving)
-[80%] sealing (before module ids)
-[81%] sealing (module ids)
-[81%] sealing (module ids NamedModuleIdsPlugin)
-[81%] sealing (module ids)
-[82%] sealing (module id optimization)
-[82%] sealing (module id optimization)
-[83%] sealing (chunk reviving)
-[83%] sealing (chunk reviving RecordIdsPlugin)
-[83%] sealing (chunk reviving)
-[83%] sealing (before chunk ids)
-[84%] sealing (chunk ids)
-[84%] sealing (chunk ids NamedChunkIdsPlugin)
-[84%] sealing (chunk ids)
-[85%] sealing (chunk id optimization)
-[85%] sealing (after chunk id optimization)
-[86%] sealing (record modules)
-[86%] sealing (record modules RecordIdsPlugin)
-[86%] sealing (record modules)
-[87%] sealing (record chunks)
-[87%] sealing (record chunks RecordIdsPlugin)
-[87%] sealing (record chunks)
-[87%] sealing (module hashing)
-[88%] sealing (code generation)
-[89%] sealing (runtime requirements)
-[89%] sealing (hashing)
-[90%] sealing (after hashing)
-[91%] sealing (record hash)
-[91%] sealing (module assets processing)
-[92%] sealing (chunk assets processing)
-[92%] sealing (asset processing)
-[92%] sealing (asset processing copy-webpack-plugin)
-[92%] sealing (asset processing HotModuleReplacementPlugin)
-[92%] sealing (asset processing ESLintWebpackPlugin_1)
-[92%] sealing (asset processing PersistentChildCompilerSingletonPlugin)
-[92%] sealing (asset processing HtmlWebpackPlugin)
-[92%] sealing (asset processing)
-[93%] sealing (after asset optimization)
-[94%] sealing (recording)
-[94%] sealing (recording HotModuleReplacementPlugin)
-[94%] sealing (recording)
-[94%] sealing (after seal)
-[95%] emitting (emit)
-[98%] emitting (after emit)
-Build finished at 10:04:44 by 0.000s
-Build finished at 10:04:44 by 0.000s
-Build finished at 10:04:44 by 0.000s
- DONE  Compiled successfully in 418ms10:04:44 AM
-
-Build finished at 10:04:44 by 0.000s
-
-  App running at:
-  - Local:   http://localhost:8080/
-  - Network: http://192.168.0.2:8080/
-
-Build finished at 10:04:44 by 0.000s
-Build finished at 10:04:44 by 0.000s
-Build finished at 10:04:44 by 0.000s
-Build finished at 10:04:44 by 0.000s
-Build finished at 10:04:44 by 0.000s
-Build finished at 10:04:44 by 0.000s
-Build finished at 10:04:44 by 0.000s
-Build finished at 10:04:44 by 0.000s
- WAIT  Compiling...10:04:51 AM
-
-Compiling...
-
-[1%] cache (end idle)
-[3%] setup (watch run)
-[3%] setup (watch run vue-loader-plugin)
-[3%] setup (watch run ESLintWebpackPlugin_1)
-[3%] setup (watch run webpack-dev-middleware)
-[3%] setup (watch run)
-[4%] setup (normal module factory)
-[4%] setup (normal module factory CaseSensitivePathsPlugin)
-[4%] setup (normal module factory)
-[5%] setup (context module factory)
-[6%] setup (before compile)
-[6%] setup (before compile ProgressPlugin)
-[6%] setup (before compile)
-[7%] setup (compile)
-[7%] setup (compile ExternalsPlugin)
-[7%] setup (compile)
-[8%] setup (compilation)
-[8%] setup (compilation CopyPlugin)
-[8%] setup (compilation ArrayPushCallbackChunkFormatPlugin)
-[8%] setup (compilation JsonpChunkLoadingPlugin)
-[8%] setup (compilation StartupChunkDependenciesPlugin)
-[8%] setup (compilation ImportScriptsChunkLoadingPlugin)
-[8%] setup (compilation FetchCompileWasmPlugin)
-[8%] setup (compilation FetchCompileAsyncWasmPlugin)
-[8%] setup (compilation WorkerPlugin)
-[8%] setup (compilation SplitChunksPlugin)
-[8%] setup (compilation ResolverCachePlugin)
-[8%] setup (compilation HtmlWebpackPlugin)
-[8%] setup (compilation)
-[9%] setup (compilation)
-[9%] setup (compilation vue-loader-plugin)
-[9%] setup (compilation DefinePlugin)
-[9%] setup (compilation ProgressPlugin)
-[9%] setup (compilation EntryPlugin)
-[9%] setup (compilation ChunkPrefetchPreloadPlugin)
-[9%] setup (compilation ModuleInfoHeaderPlugin)
-[9%] setup (compilation EvalSourceMapDevToolPlugin)
-[9%] setup (compilation JavascriptModulesPlugin)
-[9%] setup (compilation JsonModulesPlugin)
-[9%] setup (compilation AssetModulesPlugin)
-[9%] setup (compilation EntryPlugin)
-[9%] setup (compilation RuntimePlugin)
-[9%] setup (compilation InferAsyncModulesPlugin)
-[9%] setup (compilation DataUriPlugin)
-[9%] setup (compilation FileUriPlugin)
-[9%] setup (compilation CompatibilityPlugin)
-[9%] setup (compilation HarmonyModulesPlugin)
-[9%] setup (compilation AMDPlugin)
-[9%] setup (compilation RequireJsStuffPlugin)
-[9%] setup (compilation CommonJsPlugin)
-[9%] setup (compilation LoaderPlugin)
-[9%] setup (compilation NodeStuffPlugin)
-[9%] setup (compilation APIPlugin)
-[9%] setup (compilation ExportsInfoApiPlugin)
-[9%] setup (compilation WebpackIsIncludedPlugin)
-[9%] setup (compilation ConstPlugin)
-[9%] setup (compilation UseStrictPlugin)
-[9%] setup (compilation RequireIncludePlugin)
-[9%] setup (compilation RequireEnsurePlugin)
-[9%] setup (compilation RequireContextPlugin)
-[9%] setup (compilation ImportPlugin)
-[9%] setup (compilation ImportMetaContextPlugin)
-[9%] setup (compilation SystemPlugin)
-[9%] setup (compilation ImportMetaPlugin)
-[9%] setup (compilation URLPlugin)
-[9%] setup (compilation DefaultStatsFactoryPlugin)
-[9%] setup (compilation DefaultStatsPresetPlugin)
-[9%] setup (compilation DefaultStatsPrinterPlugin)
-[9%] setup (compilation JavascriptMetaInfoPlugin)
-[9%] setup (compilation EnsureChunkConditionsPlugin)
-[9%] setup (compilation RemoveEmptyChunksPlugin)
-[9%] setup (compilation MergeDuplicateChunksPlugin)
-[9%] setup (compilation SideEffectsFlagPlugin)
-[9%] setup (compilation FlagDependencyExportsPlugin)
-[9%] setup (compilation NamedModuleIdsPlugin)
-[9%] setup (compilation NamedChunkIdsPlugin)
-[9%] setup (compilation DefinePlugin)
-[9%] setup (compilation TemplatedPathPlugin)
-[9%] setup (compilation RecordIdsPlugin)
-[9%] setup (compilation WarnCaseSensitiveModulesPlugin)
-[9%] setup (compilation EntryPlugin)
-[9%] setup (compilation ProvidePlugin)
-[9%] setup (compilation HotModuleReplacementPlugin)
-[9%] setup (compilation ProgressPlugin)
-[9%] setup (compilation ESLintWebpackPlugin_1)
-[9%] setup (compilation)
-[10%] building
-[10%] building (0/0 modules)
-[24%] building (1/6 modules)
-[24%] building (import loader css-loader/dist/cjs.js)
-[24%] building (import loader postcss-loader/dist/cjs.js)
-[24%] building (20/11 modules)
-[38%] building (43/11 modules)
-[51%] building (148/11 modules)
-[51%] building (import loader vue-loader/dist/index.js)
-[51%] building (148/12 modules)
-[51%] building (import loader babel-loader/lib/index.js)
-[51%] building (import loader vue-loader/dist/templateLoader.js)
-[51%] building (148/19 modules)
-[51%] building (import loader vue-loader/dist/stylePostLoader.js)
-[51%] building (148/20 modules)
-[65%] building (1213/34 modules)
-[65%] building
-[69%] building (finish)
-[70%] sealing (finish module graph)
-[70%] sealing (finish module graph ResolverCachePlugin)
-[70%] sealing (finish module graph InferAsyncModulesPlugin)
-[70%] sealing (finish module graph FlagDependencyExportsPlugin)
-[70%] sealing (finish module graph ESLintWebpackPlugin_1)
-[70%] sealing (finish module graph)
-[71%] sealing (plugins)
-[71%] sealing (plugins WarnCaseSensitiveModulesPlugin)
-[71%] sealing (plugins)
-[71%] sealing (dependencies optimization)
-[71%] sealing (dependencies optimization SideEffectsFlagPlugin)
-[71%] sealing (dependencies optimization)
-[72%] sealing (after dependencies optimization)
-[73%] sealing (chunk graph)
-[73%] sealing (after chunk graph)
-[74%] sealing (optimizing)
-[74%] sealing (module optimization)
-[75%] sealing (after module optimization)
-[76%] sealing (chunk optimization)
-[76%] sealing (chunk optimization EnsureChunkConditionsPlugin)
-[76%] sealing (chunk optimization RemoveEmptyChunksPlugin)
-[76%] sealing (chunk optimization MergeDuplicateChunksPlugin)
-[76%] sealing (chunk optimization SplitChunksPlugin)
-[76%] sealing (chunk optimization RemoveEmptyChunksPlugin)
-[76%] sealing (chunk optimization)
-[76%] sealing (after chunk optimization)
-[77%] sealing (module and chunk tree optimization)
-[77%] sealing (module and chunk tree optimization PersistentChildCompilerSinglet
-onPlugin)
-[77%] sealing (module and chunk tree optimization)
-[78%] sealing (after module and chunk tree optimization)
-[78%] sealing (chunk modules optimization)
-[79%] sealing (after chunk modules optimization)
-[80%] sealing (module reviving)
-[80%] sealing (module reviving RecordIdsPlugin)
-[80%] sealing (module reviving)
-[80%] sealing (before module ids)
-[81%] sealing (module ids)
-[81%] sealing (module ids NamedModuleIdsPlugin)
-[81%] sealing (module ids)
-[82%] sealing (module id optimization)
-[82%] sealing (module id optimization)
-[83%] sealing (chunk reviving)
-[83%] sealing (chunk reviving RecordIdsPlugin)
-[83%] sealing (chunk reviving)
-[83%] sealing (before chunk ids)
-[84%] sealing (chunk ids)
-[84%] sealing (chunk ids NamedChunkIdsPlugin)
-[84%] sealing (chunk ids)
-[85%] sealing (chunk id optimization)
-[85%] sealing (after chunk id optimization)
-[86%] sealing (record modules)
-[86%] sealing (record modules RecordIdsPlugin)
-[86%] sealing (record modules)
-[87%] sealing (record chunks)
-[87%] sealing (record chunks RecordIdsPlugin)
-[87%] sealing (record chunks)
-[87%] sealing (module hashing)
-[88%] sealing (code generation)
-[89%] sealing (runtime requirements)
-[89%] sealing (hashing)
-[90%] sealing (after hashing)
-[91%] sealing (record hash)
-[91%] sealing (module assets processing)
-[92%] sealing (chunk assets processing)
-[92%] sealing (asset processing)
-[92%] sealing (asset processing copy-webpack-plugin)
-[92%] sealing (asset processing HotModuleReplacementPlugin)
-[92%] sealing (asset processing ESLintWebpackPlugin_1)
-[92%] sealing (asset processing PersistentChildCompilerSingletonPlugin)
-[92%] sealing (asset processing HtmlWebpackPlugin)
-[92%] sealing (asset processing)
-[93%] sealing (after asset optimization)
-[94%] sealing (recording)
-[94%] sealing (recording HotModuleReplacementPlugin)
-[94%] sealing (recording)
-[94%] sealing (after seal)
-[95%] emitting (emit)
-[98%] emitting (after emit)
-Build finished at 10:04:51 by 0.000s
-Build finished at 10:04:51 by 0.000s
-Build finished at 10:04:51 by 0.000s
- DONE  Compiled successfully in 382ms10:04:51 AM
-
-Build finished at 10:04:51 by 0.000s
-
-  App running at:
-  - Local:   http://localhost:8080/
-  - Network: http://192.168.0.2:8080/
-
-Build finished at 10:04:51 by 0.000s
-Build finished at 10:04:51 by 0.000s
-Build finished at 10:04:51 by 0.000s
-Build finished at 10:04:51 by 0.000s
-Build finished at 10:04:51 by 0.000s
-Build finished at 10:04:51 by 0.000s
-Build finished at 10:04:51 by 0.000s
-Build finished at 10:04:51 by 0.000s
-
\ No newline at end of file
diff --git a/src/components/ErrorDisplay.vue b/src/components/ErrorDisplay.vue
new file mode 100644
index 0000000..0f9f9a5
--- /dev/null
+++ b/src/components/ErrorDisplay.vue
@@ -0,0 +1,22 @@
+<template>
+  <div v-if="message" class="bg-red-100 border-l-4 border-red-500 text-red-700 p-4 rounded-lg shadow-md" role="alert">
+    <div class="flex">
+      <div class="py-1"><i class="fas fa-exclamation-triangle mr-3"></i></div>
+      <div>
+        <p class="font-bold">An error occurred:</p>
+        <p class="text-sm">{{ message }}</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { defineProps } from 'vue'
+
+defineProps({
+  message: {
+    type: String,
+    required: true,
+  },
+})
+</script>
diff --git a/src/components/MatrixDisplay.vue b/src/components/MatrixDisplay.vue
new file mode 100644
index 0000000..4a2f01c
--- /dev/null
+++ b/src/components/MatrixDisplay.vue
@@ -0,0 +1,38 @@
+<template>
+  <div>
+    <h3 class="text-lg font-semibold text-gray-800 mb-3 flex items-center justify-center gap-2">
+      <i class="fas fa-matrix"></i> {{ title }}
+    </h3>
+    <div class="inline-block border-2 border-blue-500 rounded-lg p-3 bg-gray-50 overflow-x-auto">
+      <table class="mx-auto">
+        <tr v-for="(row, i) in matrix" :key="i">
+          <td v-for="(val, j) in row" :key="j" class="p-1">
+            <input
+              :value="matrix[i][j]"
+              @input="updateValue(i, j, $event.target.value)"
+              type="number"
+              class="w-14 h-10 text-center text-gray-800 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition"
+            >
+          </td>
+        </tr>
+      </table>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { defineProps, defineEmits } from 'vue'
+
+const props = defineProps({
+  title: String,
+  matrix: Array,
+})
+
+const emit = defineEmits(['update:matrix'])
+
+const updateValue = (row, col, value) => {
+  const newMatrix = props.matrix.map(r => [...r]);
+  newMatrix[row][col] = value === '' ? null : Number(value);
+  emit('update:matrix', newMatrix);
+}
+</script>
diff --git a/src/components/MatrixInput.vue b/src/components/MatrixInput.vue
index 2173ca9..d38039e 100644
--- a/src/components/MatrixInput.vue
+++ b/src/components/MatrixInput.vue
@@ -53,45 +53,8 @@
 
             <!-- Matrices Container -->
             <div class="flex flex-col md:flex-row gap-6 mb-4">
-              <!-- Matrix A -->
-              <div class="flex-1">
-                <h3 class="text-lg font-semibold text-gray-800 mb-3 flex items-center justify-center gap-2">
-                  <i class="fas fa-matrix"></i> Matrix A
-                </h3>
-                <div class="inline-block border-2 border-blue-500 rounded-lg p-3 bg-gray-50 overflow-x-auto">
-                  <table class="mx-auto">
-                    <tr v-for="(row, i) in matrixA" :key="i">
-                      <td v-for="(val, j) in row" :key="j" class="p-1">
-                        <input
-                          v-model.number="matrixA[i][j]"
-                          type="number"
-                          class="w-14 h-10 text-center text-gray-800 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition"
-                        >
-                      </td>
-                    </tr>
-                  </table>
-                </div>
-              </div>
-
-              <!-- Matrix B -->
-              <div class="flex-1">
-                <h3 class="text-lg font-semibold text-gray-800 mb-3 flex items-center justify-center gap-2">
-                  <i class="fas fa-matrix"></i> Matrix B
-                </h3>
-                <div class="inline-block border-2 border-blue-500 rounded-lg p-3 bg-gray-50 overflow-x-auto">
-                  <table class="mx-auto">
-                    <tr v-for="(row, i) in matrixB" :key="i">
-                      <td v-for="(val, j) in row" :key="j" class="p-1">
-                        <input
-                          v-model.number="matrixB[i][j]"
-                          type="number"
-                          class="w-14 h-10 text-center text-gray-800 border border-gray-300 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500 transition"
-                        >
-                      </td>
-                    </tr>
-                  </table>
-                </div>
-              </div>
+              <MatrixDisplay title="Matrix A" :matrix="matrixA" @update:matrix="matrixA = $event" />
+              <MatrixDisplay title="Matrix B" :matrix="matrixB" @update:matrix="matrixB = $event" />
             </div>
           </div>
         </div>
@@ -106,55 +69,21 @@
           @solution="handleSolution"
           @eigenvalues="handleEigenvalues"
           @decomposition="handleDecomposition"
+          @error="handleError"
         />
 
+        <!-- Error Display -->
+        <ErrorDisplay v-if="error" :message="error" />
+
         <!-- Results Section -->
-        <div v-if="operationResult.length || determinant !== null || solution || eigenvalues || lu || qr" class="bg-white rounded-xl shadow-lg overflow-hidden mt-6">
-          <div class="bg-gray-800 text-white px-6 py-4 flex items-center">
-            <i class="fas fa-list-alt mr-3"></i>
-            <h2 class="text-lg font-semibold">Results</h2>
-          </div>
-          <div class="p-6 overflow-x-auto">
-            <div v-if="determinant !== null" class="mb-4">
-              <p class="font-semibold text-gray-800">Determinant of A:</p>
-              <p class="text-lg font-mono text-blue-600">{{ determinant }}</p>
-            </div>
-            <div v-if="operationResult.length" class="mb-4">
-              <p class="font-semibold text-gray-800">Operation Result:</p>
-              <div class="inline-block border border-gray-200 rounded p-2">
-                <table class="mx-auto">
-                  <tr v-for="(row, i) in operationResult" :key="i">
-                    <td v-for="(val, j) in row" :key="j" class="px-3 py-2 text-gray-800 border border-gray-200">
-                      {{ val.toFixed(2) }}
-                    </td>
-                  </tr>
-                </table>
-              </div>
-            </div>
-            <div v-if="solution" class="mb-4">
-              <p class="font-semibold text-gray-800">Solution:</p>
-               <div class="inline-block border border-gray-200 rounded p-2">
-                <table class="mx-auto">
-                  <tr v-for="(val, i) in solution" :key="i">
-                    <td class="px-3 py-2 border border-gray-200">{{ val.toFixed(2) }}</td>
-                  </tr>
-                </table>
-              </div>
-            </div>
-            <div v-if="eigenvalues" class="mb-4">
-              <p class="font-semibold text-gray-800">Eigenvalues:</p>
-              <p class="text-lg font-mono text-green-600">{{ eigenvalues }}</p>
-            </div>
-            <div v-if="lu">
-              <p class="font-semibold text-gray-800">LU Decomposition:</p>
-              <pre class="text-sm bg-gray-100 p-2 rounded overflow-x-auto">{{ formatDecomposition(lu) }}</pre>
-            </div>
-            <div v-if="qr" class="mt-3">
-              <p class="font-semibold text-gray-800">QR Decomposition:</p>
-              <pre class="text-sm bg-gray-100 p-2 rounded overflow-x-auto">{{ formatDecomposition(qr) }}</pre>
-            </div>
-          </div>
-        </div>
+        <ResultsDisplay
+          :operationResult="operationResult"
+          :determinant="determinant"
+          :solution="solution"
+          :eigenvalues="eigenvalues"
+          :lu="lu"
+          :qr="qr"
+        />
       </main>
 
       <!-- Footer -->
@@ -167,12 +96,17 @@
 
 <script>
 import { createApp, ref, watch } from 'vue';
-import * as math from 'mathjs';
 import OperationButtons from './OperationButtons.vue';
+import ErrorDisplay from './ErrorDisplay.vue';
+import MatrixDisplay from './MatrixDisplay.vue';
+import ResultsDisplay from './ResultsDisplay.vue';
 
 export default {
   components: {
     OperationButtons,
+    ErrorDisplay,
+    MatrixDisplay,
+    ResultsDisplay,
   },
   setup() {
     const matrixSize = ref(3);
@@ -185,7 +119,6 @@ export default {
     const eigenvalues = ref(null);
     const lu = ref(null);
     const qr = ref(null);
-    const savedMatrix = ref(null);
     const error = ref(null);
 
     function createMatrix(size) {
@@ -245,27 +178,24 @@ export default {
           qr.value = data;
         }
       },
+      handleError(errorMessage) {
+        resetResults();
+        error.value = errorMessage;
+      },
       saveMatrix() {
-        savedMatrix.value = JSON.stringify(matrixA.value);
+        localStorage.setItem('savedMatrixA', JSON.stringify(matrixA.value));
         alert('Matrix A saved successfully!');
       },
       loadMatrix() {
-        if (savedMatrix.value) {
-          matrixA.value = JSON.parse(savedMatrix.value);
+        const saved = localStorage.getItem('savedMatrixA');
+        if (saved) {
+          matrixA.value = JSON.parse(saved);
           matrixSize.value = matrixA.value.length;
           alert('Matrix A loaded successfully!');
         } else {
           alert('No matrix saved yet.');
         }
       },
-      formatDecomposition(decomp) {
-        let result = '';
-        for (const [key, value] of Object.entries(decomp)) {
-          result += `${key}:\n`;
-          result += math.format(value, { precision: 4 }) + '\n\n';
-        }
-        return result;
-      }
     };
   }
 };
diff --git a/src/components/OperationButtons.vue b/src/components/OperationButtons.vue
index 8cb7770..533d750 100644
--- a/src/components/OperationButtons.vue
+++ b/src/components/OperationButtons.vue
@@ -59,7 +59,8 @@ const emit = defineEmits([
   'operation-result',
   'solution',
   'eigenvalues',
-  'decomposition'
+  'decomposition',
+  'error'
 ])
 
 const { 
diff --git a/src/components/ResultsDisplay.vue b/src/components/ResultsDisplay.vue
new file mode 100644
index 0000000..077ec20
--- /dev/null
+++ b/src/components/ResultsDisplay.vue
@@ -0,0 +1,75 @@
+<template>
+  <div v-if="hasResults" class="bg-white rounded-xl shadow-lg overflow-hidden mt-6">
+    <div class="bg-gray-800 text-white px-6 py-4 flex items-center">
+      <i class="fas fa-list-alt mr-3"></i>
+      <h2 class="text-lg font-semibold">Results</h2>
+    </div>
+    <div class="p-6 overflow-x-auto">
+      <div v-if="determinant !== null" class="mb-4">
+        <p class="font-semibold text-gray-800">Determinant of A:</p>
+        <p class="text-lg font-mono text-blue-600">{{ determinant }}</p>
+      </div>
+      <div v-if="operationResult.length" class="mb-4">
+        <p class="font-semibold text-gray-800">Operation Result:</p>
+        <div class="inline-block border border-gray-200 rounded p-2">
+          <table class="mx-auto">
+            <tr v-for="(row, i) in operationResult" :key="i">
+              <td v-for="(val, j) in row" :key="j" class="px-3 py-2 text-gray-800 border border-gray-200">
+                {{ val.toFixed(2) }}
+              </td>
+            </tr>
+          </table>
+        </div>
+      </div>
+      <div v-if="solution" class="mb-4">
+        <p class="font-semibold text-gray-800">Solution:</p>
+         <div class="inline-block border border-gray-200 rounded p-2">
+          <table class="mx-auto">
+            <tr v-for="(val, i) in solution" :key="i">
+              <td class="px-3 py-2 border border-gray-200">{{ val.toFixed(2) }}</td>
+            </tr>
+          </table>
+        </div>
+      </div>
+      <div v-if="eigenvalues" class="mb-4">
+        <p class="font-semibold text-gray-800">Eigenvalues:</p>
+        <p class="text-lg font-mono text-green-600">{{ eigenvalues }}</p>
+      </div>
+      <div v-if="lu">
+        <p class="font-semibold text-gray-800">LU Decomposition:</p>
+        <pre class="text-sm bg-gray-100 p-2 rounded overflow-x-auto">{{ formatDecomposition(lu) }}</pre>
+      </div>
+      <div v-if="qr" class="mt-3">
+        <p class="font-semibold text-gray-800">QR Decomposition:</p>
+        <pre class="text-sm bg-gray-100 p-2 rounded overflow-x-auto">{{ formatDecomposition(qr) }}</pre>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { defineProps, computed } from 'vue';
+import * as math from 'mathjs';
+
+const props = defineProps({
+  operationResult: Array,
+  determinant: Number,
+  solution: Array,
+  eigenvalues: String,
+  lu: Object,
+  qr: Object,
+});
+
+const hasResults = computed(() => {
+  return props.operationResult.length || props.determinant !== null || props.solution || props.eigenvalues || props.lu || props.qr;
+});
+
+const formatDecomposition = (decomp) => {
+  let result = '';
+  for (const [key, value] of Object.entries(decomp)) {
+    result += `${key}:\n`;
+    result += math.format(value, { precision: 4 }) + '\n\n';
+  }
+  return result;
+}
+</script>
diff --git a/src/composables/useMatrixOperations.js b/src/composables/useMatrixOperations.js
index f2852a2..3136fd5 100644
--- a/src/composables/useMatrixOperations.js
+++ b/src/composables/useMatrixOperations.js
@@ -1,12 +1,16 @@
 import * as math from 'mathjs'
 
+function getErrorMessage(error) {
+  return error instanceof Error ? error.message : String(error);
+}
+
 export function useMatrixOperations(props, emit) {
   async function calculateDeterminant() {
     try {
       const det = math.det(props.matrixA)
       emit('determinant', det)
     } catch (error) {
-      console.error('Error calculating determinant:', error)
+      emit('error', `Determinant calculation failed: ${getErrorMessage(error)}`);
     }
   }
 
@@ -15,7 +19,7 @@ export function useMatrixOperations(props, emit) {
       const result = math.add(props.matrixA, props.matrixB)
       emit('operation-result', result)
     } catch (error) {
-      console.error('Error adding matrices:', error)
+      emit('error', `Matrix addition failed: ${getErrorMessage(error)}`);
     }
   }
 
@@ -24,7 +28,7 @@ export function useMatrixOperations(props, emit) {
       const result = math.subtract(props.matrixA, props.matrixB)
       emit('operation-result', result)
     } catch (error) {
-      console.error('Error subtracting matrices:', error)
+      emit('error', `Matrix subtraction failed: ${getErrorMessage(error)}`);
     }
   }
 
@@ -33,7 +37,7 @@ export function useMatrixOperations(props, emit) {
       const result = math.multiply(props.matrixA, props.matrixB)
       emit('operation-result', result)
     } catch (error) {
-      console.error('Error multiplying matrices:', error)
+      emit('error', `Matrix multiplication failed: ${getErrorMessage(error)}`);
     }
   }
 
@@ -43,7 +47,7 @@ export function useMatrixOperations(props, emit) {
       const solution = math.lusolve(props.matrixA, b).toArray().flat()
       emit('solution', solution)
     } catch (error) {
-      console.error('Error solving equations:', error)
+      emit('error', `Failed to solve linear equations: ${getErrorMessage(error)}`);
     }
   }
 
@@ -56,7 +60,7 @@ export function useMatrixOperations(props, emit) {
       ).join(', ')
       emit('eigenvalues', eigenvalues)
     } catch (error) {
-      console.error('Error calculating eigenvalues:', error)
+      emit('error', `Eigenvalue calculation failed: ${getErrorMessage(error)}`);
     }
   }
 
@@ -70,7 +74,7 @@ export function useMatrixOperations(props, emit) {
       }
       emit('decomposition', { type: 'lu', data: lu })
     } catch (error) {
-      console.error('Error performing LU decomposition:', error)
+      emit('error', `LU decomposition failed: ${getErrorMessage(error)}`);
     }
   }
 
@@ -83,7 +87,7 @@ export function useMatrixOperations(props, emit) {
       }
       emit('decomposition', { type: 'qr', data: qr })
     } catch (error) {
-      console.error('Error performing QR decomposition:', error)
+      emit('error', `QR decomposition failed: ${getErrorMessage(error)}`);
     }
   }