Skip to content

Using Vue3 rebuild the application - #5

Merged
swarfte merged 19 commits into
mainfrom
dev
May 31, 2026
Merged

Using Vue3 rebuild the application#5
swarfte merged 19 commits into
mainfrom
dev

Conversation

@swarfte

@swarfte swarfte commented May 30, 2026

Copy link
Copy Markdown
Owner

This pull request migrates the project from a Python/Tkinter desktop application to a modern Vue.js + TypeScript web application. It removes all Python-related files, dependencies, and build instructions, and replaces them with new documentation, configuration, and project structure for a web-based tool. The new implementation introduces a component-based architecture, state management with Pinia, and a much richer feature set focused on usability for CTF and security professionals.

Project migration and architecture overhaul:

  • Migrated the project from a Python/Tkinter single-file GUI to a Vue 3 + TypeScript web application, with a new component-based structure, Pinia state management, and Tailwind CSS styling. The new architecture is documented in detail in README.md and CLAUDE.md. [1] [2]
  • Added a new index.html as the entry point for the Vite-powered web application.

Documentation and developer experience:

  • Rewrote README.md and CLAUDE.md to describe the new web application, its features, architecture, tech stack, and development workflow. Added detailed usage instructions, component breakdown, and example commands. [1] [2]
  • Added .vscode/extensions.json to recommend the Volar extension for Vue development.

Removal of legacy Python/Tkinter implementation:

  • Removed all references to Python, Tkinter, and related dependencies and build instructions, including .python-version, build.md, and .claude/settings.json. [1] [2] [3]

These changes modernize the project, making it browser-based, easier to maintain, and more accessible for contributors and users.

swarfte added 18 commits May 27, 2026 17:13
Convert protocol templates (HTTP, POST, Redis, SMTP) to raw string literals so backslashes are preserved. Change payload_to_printf to convert actual newlines to literal "\r\n" in the "Escapes" mode. In NcCommandBuilder, convert literal "\r\n" sequences back to real newlines for the payload preview so the GUI shows human-readable output. These tweaks make escaping consistent between storage, formatting, and display.
Replace minimal platform notes with a full Build (Portable / Single-file) guide. Adds per-OS PyInstaller commands and expected outputs for Windows, macOS, and Linux, macOS .icns conversion notes, and system-wide/user install instructions. Also adds the netcat-logo.ico asset used by the examples.
Add icon assets (netcat-logo.ico, netcat-logo.png, netcat-logo.svg) under icons/ and update main.py to load them at startup. The code checks APP_DIR/icons, uses iconbitmap() with the .ico on Windows and PhotoImage + iconphoto() with the .png (keeping a reference in self._icon_img) so the application window shows the app icon across platforms.
Move icon assets into an icons/ subdirectory and update build instructions to match. Update Windows and macOS pyinstaller commands to use icons/netcat-logo.(ico|png), adjust macOS icon conversion steps to read/write from icons/, produce icons/netcat-logo.icns, and clarify the macOS output as dist/nc-command-builder.app.
Update packaging docs to include --add-data for icons (Windows uses "icons;icons", macOS uses "icons:icons"). In code, add RESOURCE_DIR that uses sys._MEIPASS when frozen and switch icon_dir to RESOURCE_DIR/icons so the packaged executable can locate bundled icon resources.
Reformat the macOS pyinstaller invocation and update options: switch from --onefile to --onedir to produce a bundle directory, add --osx-bundle-identifier to set the app bundle ID, and normalize the icon/add-data arguments. The change makes the macOS build produce a proper .app bundle and improves readability of the command.
Update payload_to_printf to provide safer, more comprehensive escaping for the "Escapes (\\r\\n, \\x41)" mode and clarify its docstring. The new implementation iterates the input and normalizes CRLF/newlines, escapes backslashes, double quotes, shell metacharacters ($, `), doubles percent signs to avoid printf format interpolation, and encodes control characters (and DEL) as \xNN. Docstring updated to state output is safe for use inside shell double quotes. Other modes (Plain text, Hex) remain unchanged.
Strengthen escaping in payload_to_printf. Plain text mode now additionally escapes "$" and backtick to avoid shell expansion and keep payload/preview identical. Escapes mode switches to a \"\xNN\"-style encoding for spaces, quotes, %, \, $, backticks, control characters and DEL, while preserving alphanumerics and safe punctuation. Simplifies multiple per-char branches into a single encode set and updates comments to explain the encoding rationale.
Add robust handling for URL-encoding and single-quote escaping in payloads. Introduce _URL_SAFE, _url_encode_uri, and _escape_for_single_quotes helpers and import re. Rework payload_to_printf to accept send_method, normalize line endings, URL-encode the URI in HTTP request lines for Escapes mode, and escape single quotes/backslashes in headers/body while preserving readability. Update build_command to pass send_method and choose single vs double quotes depending on mode and send method so printf/echo -e invocations are correctly quoted.
Update .gitignore to add a custom ignore section and exclude test.json from version control to prevent committing local test data.
Detect HTTP request lines and auto-append the required blank line between headers and body. Introduces an is_http flag, consolidates result assembly, and appends '\r\n\r\n' when a detected HTTP payload is missing the terminating CRLF sequence to ensure correct HTTP formatting when using printf-style output.
Update PyInstaller commands in build.md to use platform-specific artifact names to avoid collisions: --name values changed to `nc-command-builder-win`, `nc-command-builder-mac`, and `nc-command-builder-linux` for the Windows, macOS, and Linux examples respectively. This clarifies the generated build outputs in the documentation.
Add 'profiles' to .gitignore so the profiles file/directory is excluded from version control. Also normalizes EOF newline and preserves existing ignores (e.g., test.json).
Add _interpret_escapes static helper and use it in _url_encode to convert common escape sequences into their actual byte values before percent-encoding. Supported sequences: \n, \r, \t, \0, \\ and \xNN hex bytes; invalid \xNN falls back to keeping the literal backslash sequence. Bytes are fed to urllib.parse.quote via a latin-1 decode so the raw byte values are preserved in the resulting percent-encoding. This lets users enter escaped bytes in the payload textarea and have them encoded correctly.
Add a top-level _interpret_escapes() to convert \n, \r, \t, \xNN, \0 and \\ into actual characters and reuse it across the module. Remove the duplicate class-level byte-oriented interpreter and update _url_encode_uri and NcCommandBuilder._url_encode to apply percent-encoding to the interpreted string (so escapes like \n become %0A rather than %5Cn). Docstrings updated and urllib.parse.quote used directly on the decoded text, simplifying encoding logic and centralizing escape parsing.
Introduce an Auto Content-Length feature: add var_auto_content_length state, a checkbox in the options UI, and include it in profile save/load. Preview generation now applies _apply_auto_content_length which detects header/body separator (CRLF or LF), computes the body byte length (interpreting escape sequences when payload mode requires), and replaces any existing Content-Length header via regex. Traces updated so changes refresh the preview immediately.
* Refactor app into MVC architecture

Split the original single-file nc-command-builder into a clear MVC layout and wire up lightweight controllers. Added controller layer (AppController, PayloadController, ProfileController, CommandController), updated main.py to initialize controllers and act as a minimal entry point, and preserved the original monolith as main_legacy.py. Created scaffolding for model, view and utils modules (command builder, payload transformer, profile/template managers, view components, and escape handlers). Updated log.md and CLAUDE.md to reflect the architectural redesign and development workflow notes. This change improves separation of concerns, testability and extensibility while keeping backward compatibility for existing profiles.

* Remove HelpersPanel and demo profile

Delete the HelpersPanel UI and associated demo profile; update imports, main window layout, tests, and changelog. Removed view/helpers_panel.py and profiles/demo.json, removed HelpersPanel from view/__init__.py and view/main_window.py, and updated test_mvc.py to stop importing HelpersPanel. Added a Recent Updates note to log.md explaining the removal and adjustments. This cleans up the UI and test surface after deeming the helpers panel unnecessary.

* Remove legacy main_legacy.py

Delete the legacy Tkinter/ttkbootstrap Netcat Command Builder (main_legacy.py). Removes the GUI application and associated helpers, including payload escaping/encoding utilities, command construction logic, templates, and profile save/load functionality (previous ~763-line legacy implementation).

* Increase main window default size

Update view/main_window.py to change the default window geometry from 960x720 to 1280x900 to provide more space for the UI. Minimum size remains 800x600; no other behavior changes.

* Remove custom ignore entries from .gitignore

Deleted custom ignore rules for `test.json` and `profiles` (and removed an extra blank line) from .gitignore to allow those files to be tracked and to clean up the ignore file.

* Fix profile folder handling and sidebar menu

Persist and restore profile folder state and improve sidebar UX. Added current_folder (default "General"), set_folder(), updated save_profile() to use current_folder and load_profile() to restore it to fix the "Uncategorized" overwrite bug. Sidebar was simplified by removing inline "New Profile/New Folder" buttons, adding right-click context menus (empty space, folder, profile), and creating a default "My First Profile" in the "General" folder when no profiles exist. and updated log.md with the change summary.

* Add folder tracking and immediate sidebar refresh

Introduce known_folders tracking to AppController and ensure folders are visible and created immediately. AppController now loads existing folders on init (_load_existing_folders), exposes create_folder() and get_known_folders(), and auto-adds folders when set or when loading profiles. ProfileController now initializes folder buckets from get_known_folders() and uses "General" as the default folder. Sidebar now creates folders via the controller and refreshes itself after creation. MainWindow triggers a sidebar refresh after controllers are set to fix the empty-sidebar-on-startup issue. Updated log.md with notes about the fixes.

* Auto-save profiles; track templates; add Ctrl+S

Add profile auto-save and template tracking across the UI. Changes include: save and restore a new `template` field in AppController profiles, set `current_profile` when saving, and update PayloadEditor to sync template selection. Sidebar now auto-saves the current profile before loading another and shows combined feedback ("Saved 'X' → Loaded 'Y'!"). MainWindow gets a Ctrl+S shortcut to save the current profile and a slightly larger default window width. Update HTTP GET template (and README) to use `GET / HTTP/1.1`. Changelog (log.md) updated with these user-facing notes.

* Fix profile switching data overwrite

Fix a critical bug where switching profiles could overwrite profile data with stale UI state. The cause was calling `_update_preview()` after `sync_from_controller()`, which synced UI variables back into the controller and corrupted other profiles. In view/sidebar.py the flow was adjusted: the current profile is auto-saved, the new profile is loaded into the controller, the UI is synced from the controller, and only the command preview is updated (via command_preview.update_preview()) instead of performing a full UI→controller sync. Also added a detailed changelog entry to log.md documenting the bug, root cause, and the fix.

* Remove MVC modules, views, models and assets

Delete the refactored MVC implementation and related resources: remove controller/, model/, view/, and utils/ modules, test_mvc.py, log.md, .claude/settings.json, and netcat-logo.ico. The main.py entrypoint was cleared (file emptied). Leaves the repository in a minimal state by removing the MVC code, templates, profile manager, payload/command builders, and associated tests/assets.

* Remove project sources and config files

Delete core project files: .gitignore, .python-version, build.md, main.py, pyproject.toml and uv.lock. This cleans up repository by removing the package metadata, build instructions, entrypoint and lock/config files (e.g. dependency and environment settings). Ensure this change is intentional — it removes the application entrypoint and packaging information.

* Initial Vue 3 + Vite project scaffold

Add initial scaffold for the nc-command-builder app using Vue 3 + Vite (TypeScript). Includes package.json and lockfile, .gitignore, VSCode extension recommendations, project entry (index.html, src/*: App.vue, main.ts, components, assets, styles), public assets and favicons (icons moved into public/), and tsconfig/vite config files to get development started.

* Add Pinia deps; remove starter assets and styles

Add Pinia and pinia-plugin-persistedstate to package.json and update the lockfile. Remove the default HelloWorld component, related assets (hero.png, vite.svg, vue.svg) and the global style.css. Simplify App.vue to a minimal placeholder (<p>123</p>) as part of cleaning up the starter template.

* Add Profile and Folder models and Pinia stores

Introduce src/models.ts with Profile and Folder TypeScript interfaces. Add src/stores.ts implementing two Pinia stores: a folder store managing a folder dictionary (creates a default "General" folder, addFolder/deleteFolder with existence checks) and a profile store exposing reactive profile fields with sensible defaults. Both stores are configured to persist to localStorage.

* Add vite-plugin-vue-devtools

Add vite-plugin-vue-devtools to package.json and enable it in vite.config.ts to provide Vue Devtools during development. package-lock.json was regenerated to reflect the new dependency and its transitive packages.

* Add profile management methods to folder store

Expose new folder/profile management helpers in the folder store: addProfileToFolder and deleteProfileFromFolder. Both perform existence checks and throw descriptive errors on failure, and return true on success. Also updated addFolder and deleteFolder to return true and exported the new methods from the store so callers can add/remove profiles within folders.

* Add IDs and refactor profile & folder stores

Introduce id and version to Profile and add id to Folder; remove deprecated fields (outputCommand, contentLength). Add createDefaultProfile and migrate profile store to use a single currentProfile ref with helpers (resetProfile, loadProfile, updateProfile) and a computed placeholder outputCommand. Refactor folder store to generate UUIDs for folders, use structuredClone when adding/updating profiles, prevent deletion of the built-in "General" folder, and switch profile operations to use profile.id (add/update/delete). Bump persisted store keys to "nc-folder-store-v1" and "nc-current-profile-v1". These changes improve immutability, introduce stable identifiers, and prepare for versioned profiles; note API changes for profile deletion/update (now use profile id).

* Add Tailwind support, favicon, and sidebar

Install and configure Tailwind (@tailwindcss/vite and tailwindcss) and update vite config to include the plugin. Add a global style import for Tailwind, and apply a sample Tailwind class in App.vue. Add an empty profileSidebar component scaffold and update favicon to netcat-logo.svg. Minor reorder in main.ts to register Pinia plugin before creating the app; package-lock.json updated accordingly.

* Scaffold main layout and area components

Replace placeholder in App.vue with a grid-based layout and import/use new area components. Add ConfigArea.vue, PayloadArea.vue, and PreviewArea.vue (simple placeholder templates). Rename profileSidebar.vue to ProfileArea.vue and adjust its template. These changes scaffold the app's main UI into sidebar, config, payload, and preview areas.

* Add heroicons; update layout and ProfileArea

Add @heroicons/vue dependency and update UI layout. Fix component import casing for ProfileArea and PayloadArea, replace React-style className with class, and convert the main grid from 5x7 to a 12x9 layout with adjusted column/row spans for ProfileArea, ConfigArea, PayloadArea, and PreviewArea. Implement a toolbar in ProfileArea: search input plus FolderPlus, DocumentPlus and MagnifyingGlass icons (imported from @heroicons/vue).

* Expose folderList and render folders in UI

Add a folderList computed to the folder store (derived from Object.values(folderDict)) and export it. Update ProfileArea.vue to import useFolderStore and useProfileStore, bind folderList in the setup script, and render each folder's folderName with a v-for loop (includes a console.log for debugging). This surfaces stored folders to the profile UI so the folder list is displayed.

* Remove CLAUDE.md and revamp ProfileArea sidebar

Delete outdated CLAUDE.md and perform a large refactor of src/components/ProfileArea.vue. Replace the old grid with a full-height sidebar layout, add a search input, folder list with expand/collapse, profile items, and empty-state UI. Implement a context menu (new folder/new profile) with positioning and an overlay to close it; add reactive state (expandedFolders, contextMenu), typed interfaces, and handlers for folder/profile context actions, new-folder prompt, and creating/loading profiles. Update imports to include additional heroicons, use the profile and folder stores, remove a stray console.log, and wire profile creation to the store with UUID generation and optimistic expansion.

* Make PayloadArea div full height

Add the `h-100` class to the root div in PayloadArea.vue so the component fills the available vertical space for layout consistency.

* Replace structuredClone with object spread

Replace structuredClone(profile) with a shallow copy using {...profile} in src/stores.ts (folder add/update and loadProfile). This removes dependency on structuredClone for compatibility; note this produces a shallow copy so nested objects will not be deeply cloned.

* Add duplicate/rename/delete for profiles & folders

Extend sidebar context menu with Duplicate, Rename and Delete actions for profiles and folders. UI: add menu buttons, divider and dedicated rename dialogs for profiles and folders. State: extend ContextMenuOptions/State and add refs for rename dialogs/inputs and rename values. Imports: include additional Heroicons used by the new menu items.

Behavior: implement handleDuplicate to duplicate a profile (new UUID + "(copy)" suffix) or duplicate a folder (create new folder, copy profiles with new UUIDs), expanding the new folder. Implement handleRename to open rename dialogs and confirmRenameProfile to update a profile in the store (also updates the current profile if needed). confirmRenameFolder currently shows an alert indicating store changes are required (not implemented). Implement handleDelete with confirmation prompts to remove profiles or folders and protect the General folder from deletion; deleting the active profile resets to default. All actions close the context menu after execution.

* Use folder IDs in store and update ProfileArea

Migrate folder store from name-keyed entries to id-keyed entries and update consumers.

- Store: folderDict now uses folder.id as the key (random UUID). API signatures changed to accept folderId instead of folderName for add/delete/update profile and delete folder. addFolder now returns the created Folder object, deleteFolder/renameFolder operate by id, and getFolderById was added. Added validation checks (duplicate names, missing ids) and bumped persisted store key to "nc-folder-store-v2".
- ProfileArea: Updated to work with the new id-based store APIs (pass folder.id everywhere), handle optional targetFolder, implement renameFolder flow using the new store method, expand new folders after create/duplicate, and update delete/duplicate logic accordingly.
- Minor UI: Replace numeric placeholders in ConfigArea, PayloadArea and PreviewArea templates with descriptive labels.

Reason: Use stable UUIDs as folder keys to allow renaming and avoid collisions, and update the UI logic to match the new store contract.

* Use fixed ID for General folder

Introduce a constant generalFolderId ("-1") and use it as the key and id for the default "General" folder instead of generating two separate UUIDs. This ensures the default folder has a stable, predictable id and avoids mismatches from multiple crypto.randomUUID() calls. Also apply minor formatting fixes to arrow function callbacks.

* Add default profile and protect General folder

Create a built-in default profile in the General folder and update UI/store logic to treat General by ID (-1). Prevent renaming, duplicating or deleting the General folder and disallow duplicating/renaming/deleting the default profile. Update ProfileArea to use folderStore.getFolderById('-1'), initialize/load the default profile on mount, and ensure deletion of the current profile falls back to the default. Also bump persisted profile storage key to v2 to reflect the default-profile addition.

* Allow duplicate/rename for General/default

Use folder ID ('-1') to identify the General folder and default profile instead of comparing folderName. Relax context-menu restrictions so General folder and the default profile can be duplicated and renamed; only deletion remains prohibited. Updates context menu option flags in src/components/ProfileArea.vue for more robust identification and consistent behavior.

* Add Reset All Data button and dialog

Introduce a Reset button to the profile toolbar and a confirmation dialog to prevent accidental data loss. Move the search input into a flex container to accommodate the new button, import ArrowPathIcon, and add showResetConfirmDialog state. Implement confirmReset and cancelReset handlers: confirmReset restores folderStore.folderDict to a default General folder with a default profile, loads that profile into profileStore, resets expandedFolders to only General, and closes the dialog. cancelReset simply closes the dialog.

* Adjust grid layout, payload height, and profile button

Resize the main grid to give central areas more space by shrinking the profile column (col-span-3 → col-span-2) and expanding the config/payload/preview columns (col-span-9 → col-span-10) with updated col-start values (App.vue). Reduce the payload container height class from h-100 to h-90 (PayloadArea.vue). Simplify the profile Reset button to an icon-only button, remove the text label, and increase the icon size (size-4 → size-5) while keeping the click handler intact (ProfileArea.vue).

* Add configuration UI and sync with profile store

Replace placeholder Config Area with a full configuration form (Tailwind-styled) exposing basic, network and advanced options (host, port, mode, protocol, netcat flavor, flags, timeout, delay, bind, etc.). Add a reactive Profile-based config object with sensible defaults, import useProfileStore, and wire up onMounted and watch handlers to load the current profile and push config changes back to the profile store (deep watchers).

* Update ConfigArea layout and labels

Adjust layout and labeling in src/components/ConfigArea.vue: switch container to full width, increase grid columns (Basic: 3->5, Network: 2->3) and remove a col-span on the Netcat Flavor field to redistribute form controls. Rename several labels/comments for clarity (Delay -> Close Delay, Bind -> Bind Script) and update the bind input placeholder from an IP to a shell command (-s indicator retained). These tweaks improve spacing and better reflect the bind command usage.

* Use localConfig and sync profile/folder stores

Replace direct v-model binding to the shared profile object with a localConfig reactive object to avoid mutating store state directly. Add isUpdatingFromStore guard and loadCurrentProfile to initialize localConfig from profileStore.currentProfile. Watch localConfig (deep) to update profileStore.updateProfile and also update the corresponding profile inside folderStore (findFolderForProfile + updateProfileInFolder), preventing circular updates. Remove the old config ref and its watcher; keep onMounted to load the current profile. This centralizes edit state, prevents immediate two-way binding issues, and ensures folder-level profile data stays in sync.

* Reorder network options and tidy ConfigArea markup

Move the Network Options block below the Advanced Options section and comment out the visible section headings for Basic/Advanced/Network. Also collapse multi-line input/select tags into single-line attributes and apply minor markup/whitespace cleanup. These are layout and formatting changes only; no functional logic was modified.

* Add payload editor UI and store sync

Implement a full PayloadArea component with Raw/GET/POST modes, including UI for selecting mode, editing raw payload, managing query parameters (GET) and body parameters (POST), plus content-type selection. Introduce localConfig, parameter parsing/serialization, and two-way syncing with profileStore and folderStore (with a guard to avoid circular updates). Also add rawPayload to the Profile model and initialize defaults in stores so profiles can store raw payload data.

* Add debounced updates and profile switch handling

Replace immediate store syncs with a debouncedUpdate handler to reduce frequent updates from input/change events, and introduce updateTimeout. Use nextTick when adding/removing parameters to ensure DOM updates before syncing. Track currentProfileId and refine isUpdatingFromStore semantics to avoid circular updates when switching profiles, add a watcher for profileStore.currentProfile.id to reload profile on switch, and add guards in the localConfig watcher so store updates are skipped while applying store changes. Also import nextTick and tweak small timing values.

* Add PreviewArea UI and command generation

Replace placeholder PreviewArea with a full-featured preview UI and logic. Adds encoding mode selector, generated netcat command display with copy button, command breakdown, and payload previews (including raw and URL-encoded display). Implements command generation helpers for multiple netcat flavors (flags for UDP, listen, keep-alive), GET/POST request builders, and payload injection. Hooks into profile store via computed properties, watches for profile changes, and includes clipboard copy handling and basic UI styling.

* Simplify PreviewArea UI and clean logic

Remove the detailed command breakdown and payload preview UI, leaving only the Netcat command display with copy button. Clean up associated script logic by removing unused computed properties (generatedRequest, displayRawPayload), unused lifecycle imports (watch, onMounted) and their handlers, and by returning the generated command directly from generatedCommand. Also remove an unused local variable in generateGETRequest. This trims complexity and eliminates dead code in PreviewArea.vue.

* Adjust padding and layout in Config and Payload areas

Tweak layout and spacing for ConfigArea.vue and PayloadArea.vue: replace broad p-4 padding with horizontal paddings (pl-2 pr-2) and add pt-2 in ConfigArea; remove h-full and the inner flex-1 in ConfigArea to simplify sizing. These changes refine the scrollable regions and reduce excessive padding for better alignment within the container.

* Reduce grid gap and default parameters to 2

Tighten the main layout by changing the grid gap from 4 to 2 in src/App.vue. In src/components/PayloadArea.vue, reduce the number of initialized empty parameter rows from 4 to 2 by changing initializeEmptyParameters default to 2 and removing explicit 4 arguments where it was used for query and body parameter fallbacks. This cleans up the UI and reduces default empty rows shown when no parameters are present.

* Simplify App.vue grid layout and sizing

Refactor App.vue grid classes to simplify layout: replace multiple explicit row-span/row-start/col-start settings with unified col-span usage, add items-start and min-h-screen to ensure vertical alignment and full-height layout. ProfileArea now uses row-span-3 while ConfigArea, PayloadArea, and PreviewArea are simplified to col-span-10 to reduce complexity.

* Reduce vertical spacing and tidy preview UI

Reduce vertical spacing and clean up markup across several Vue components to tighten the layout. Changes:

- src/components/ConfigArea.vue: decreased header and network section bottom margins (mb-4 -> mb-2).
- src/components/PayloadArea.vue: reduced margin for payload mode selector (mb-4 -> mb-2) and added a width class to the POST content-type wrapper (div -> div.w-100).
- src/components/PreviewArea.vue: reduced container padding (p-4 -> p-2), commented out the preview heading, reduced margin for encoding selector (mb-4 -> mb-2), and simplified button/pre markup for readability.

These are UI/layout and markup cleanups only; no functional logic changes.

* Style add/remove parameter buttons

Update PayloadArea.vue to replace plain text add/remove buttons with styled, accessible buttons for both Query and Body parameters. Adds inline-flex layout, rounded borders, background colors, spacing, a separate "+" span for the add actions, and hover/transition classes; no functional changes, purely presentational.

* Use grid layout and unify heights for parameter rows

Replace flex-based headers with a 12-column grid for Query and Body parameter sections to improve alignment. Move labels to col-span-10 and action buttons to col-span-2, add consistent h-9 heights to inputs and action/remove buttons, and adjust button centering and padding for visual consistency. Purely stylistic/layout changes; no functional behavior altered.

* Add optional path field to profiles & UI

Expose a new optional `path` property for profiles and wire it through the UI and store. Added a Path input to ConfigArea.vue and included `path` in localConfig and loadCurrentProfile. Updated ProfileArea.vue to initialize new and reset profiles with `path` set to an empty string. Added `path?: string` to the Profile interface in models.ts and included `path` in default profile objects in stores.ts. This enables targeting endpoints with a path while remaining backward-compatible (optional field).

* Use configured path + query in request preview

Read cfg.path (defaulting to '/') and include it in generated GET and POST requests. GET now appends cfg.query to the configured path (respecting existing '?' in the path) to build the full request line. Also updated POST to use the configured path. Minor layout tweak: changed ConfigArea grid from 5 to 6 columns to accommodate the additional input.

* Only add keep-alive flag in listen mode

Restrict adding the netcat keep-alive flag to listen mode only. Previously cfg.isKeepListening could append the flag regardless of target mode; this change adds a check for cfg.targetMode === 'listen' and updates the comment to avoid adding the keep-alive flag for non-listen modes.

* Unify payload handling and add URL-encoding

Remove per-payload branching and always append payload/raw payload directly. Add URL-encoding support for query parameters in GET requests and for form bodies in POST requests (based on encodingMode.value and contentType), compute Content-Length from the possibly-encoded body, and ensure the encoded body is used when building the request. This centralizes encoding logic and fixes content-length calculation for encoded bodies.

* Add form-like encoder for URL-encoded data

Introduce encodeFormLike that parses raw form-style strings (key=value&...) into a URLSearchParams and returns a properly encoded string. Replace prior encodeURIComponent usage with this function for GET query concatenation and POST bodies when content-type is application/x-www-form-urlencoded, ensuring keys and values (including values containing '=') are encoded correctly while preserving the key/value structure.

* Remove encoding mode selector UI

Remove the encoding mode selector buttons and the unused encodingModes array from PreviewArea.vue. This simplifies the preview UI by deleting the mode switcher markup and its constant while keeping the encodingMode ref in place; no other functional changes made.

* Add userAgent field, UI and request header

Introduce a userAgent property to Profile and propagate it through the app so generated HTTP payloads include a customizable User-Agent header. Changes include:

- models.ts: add userAgent to Profile interface.
- stores.ts: set default userAgent in createDefaultProfile and initial folder profiles.
- ProfileArea.vue: include userAgent in new profile and reset defaults.
- ConfigArea.vue: add a User Agent input, expand advanced options grid, and load/save userAgent into localConfig.
- PreviewArea.vue: use cfg.userAgent for User-Agent header in generated GET/POST requests.
- Add CLAUDE.md: repository guidance and development notes.

Purpose: allow users to control the User-Agent sent in netcat-built HTTP requests and document the project.

* Rewrite README for web app & update screenshot

Completely rewrite README to reflect a modern web-based implementation (Vue 3 + TypeScript + Vite) instead of the prior Python/Tkinter app. Expanded features, payload editor modes (Raw/GET/POST), flavor-specific command generation, profile/folder management, and architecture/tech-stack details. Replaced quick start and build instructions with Node/npm/Vite commands, updated project structure to src/ component layout, added state management (Pinia) and Tailwind references, and included browser compatibility and contributing notes. Also updated the main screenshot (binary file changed). License remains Apache-2.0.
Copilot AI review requested due to automatic review settings May 30, 2026 18:02
@swarfte

swarfte commented May 30, 2026

Copy link
Copy Markdown
Owner Author

@copilot resolve the merge conflicts in this pull request, the main,py m build.md is not necessary , and the .gitignore should using the vue3 version

Copilot AI left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copilot encountered an error and was unable to review this pull request. You can try again by re-requesting a review.

Copilot AI commented May 30, 2026

Copy link
Copy Markdown

@copilot resolve the merge conflicts in this pull request, the main,py m build.md is not necessary , and the .gitignore should using the vue3 version

Addressed in commit c0fde9a: merged main and resolved conflicts by keeping main.py and build.md removed, and updated .gitignore to the Vue 3/Vite-style ignore rules.

@swarfte
swarfte merged commit 786735e into main May 31, 2026
@swarfte
swarfte deleted the dev branch May 31, 2026 05:59
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants