Upload folder using huggingface_hub

.gitattributes

@@ -33,3 +33,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+screenshot.png filter=lfs diff=lfs merge=lfs -text

.gitignore

@@ -0,0 +1,8 @@
+/_test/
+
+/.venv/
+/uv.lock
+
+.DS_Store
+
+__pycache__/

LICENSE

@@ -0,0 +1,661 @@
+                    GNU AFFERO GENERAL PUBLIC LICENSE
+                       Version 3, 19 November 2007
+
+ Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>
+ Everyone is permitted to copy and distribute verbatim copies
+ of this license document, but changing it is not allowed.
+
+                            Preamble
+
+  The GNU Affero General Public License is a free, copyleft license for
+software and other kinds of works, specifically designed to ensure
+cooperation with the community in the case of network server software.
+
+  The licenses for most software and other practical works are designed
+to take away your freedom to share and change the works.  By contrast,
+our General Public Licenses are intended to guarantee your freedom to
+share and change all versions of a program--to make sure it remains free
+software for all its users.
+
+  When we speak of free software, we are referring to freedom, not
+price.  Our General Public Licenses are designed to make sure that you
+have the freedom to distribute copies of free software (and charge for
+them if you wish), that you receive source code or can get it if you
+want it, that you can change the software or use pieces of it in new
+free programs, and that you know you can do these things.
+
+  Developers that use our General Public Licenses protect your rights
+with two steps: (1) assert copyright on the software, and (2) offer
+you this License which gives you legal permission to copy, distribute
+and/or modify the software.
+
+  A secondary benefit of defending all users' freedom is that
+improvements made in alternate versions of the program, if they
+receive widespread use, become available for other developers to
+incorporate.  Many developers of free software are heartened and
+encouraged by the resulting cooperation.  However, in the case of
+software used on network servers, this result may fail to come about.
+The GNU General Public License permits making a modified version and
+letting the public access it on a server without ever releasing its
+source code to the public.
+
+  The GNU Affero General Public License is designed specifically to
+ensure that, in such cases, the modified source code becomes available
+to the community.  It requires the operator of a network server to
+provide the source code of the modified version running there to the
+users of that server.  Therefore, public use of a modified version, on
+a publicly accessible server, gives the public access to the source
+code of the modified version.
+
+  An older license, called the Affero General Public License and
+published by Affero, was designed to accomplish similar goals.  This is
+a different license, not a version of the Affero GPL, but Affero has
+released a new version of the Affero GPL which permits relicensing under
+this license.
+
+  The precise terms and conditions for copying, distribution and
+modification follow.
+
+                       TERMS AND CONDITIONS
+
+  0. Definitions.
+
+  "This License" refers to version 3 of the GNU Affero General Public License.
+
+  "Copyright" also means copyright-like laws that apply to other kinds of
+works, such as semiconductor masks.
+
+  "The Program" refers to any copyrightable work licensed under this
+License.  Each licensee is addressed as "you".  "Licensees" and
+"recipients" may be individuals or organizations.
+
+  To "modify" a work means to copy from or adapt all or part of the work
+in a fashion requiring copyright permission, other than the making of an
+exact copy.  The resulting work is called a "modified version" of the
+earlier work or a work "based on" the earlier work.
+
+  A "covered work" means either the unmodified Program or a work based
+on the Program.
+
+  To "propagate" a work means to do anything with it that, without
+permission, would make you directly or secondarily liable for
+infringement under applicable copyright law, except executing it on a
+computer or modifying a private copy.  Propagation includes copying,
+distribution (with or without modification), making available to the
+public, and in some countries other activities as well.
+
+  To "convey" a work means any kind of propagation that enables other
+parties to make or receive copies.  Mere interaction with a user through
+a computer network, with no transfer of a copy, is not conveying.
+
+  An interactive user interface displays "Appropriate Legal Notices"
+to the extent that it includes a convenient and prominently visible
+feature that (1) displays an appropriate copyright notice, and (2)
+tells the user that there is no warranty for the work (except to the
+extent that warranties are provided), that licensees may convey the
+work under this License, and how to view a copy of this License.  If
+the interface presents a list of user commands or options, such as a
+menu, a prominent item in the list meets this criterion.
+
+  1. Source Code.
+
+  The "source code" for a work means the preferred form of the work
+for making modifications to it.  "Object code" means any non-source
+form of a work.
+
+  A "Standard Interface" means an interface that either is an official
+standard defined by a recognized standards body, or, in the case of
+interfaces specified for a particular programming language, one that
+is widely used among developers working in that language.
+
+  The "System Libraries" of an executable work include anything, other
+than the work as a whole, that (a) is included in the normal form of
+packaging a Major Component, but which is not part of that Major
+Component, and (b) serves only to enable use of the work with that
+Major Component, or to implement a Standard Interface for which an
+implementation is available to the public in source code form.  A
+"Major Component", in this context, means a major essential component
+(kernel, window system, and so on) of the specific operating system
+(if any) on which the executable work runs, or a compiler used to
+produce the work, or an object code interpreter used to run it.
+
+  The "Corresponding Source" for a work in object code form means all
+the source code needed to generate, install, and (for an executable
+work) run the object code and to modify the work, including scripts to
+control those activities.  However, it does not include the work's
+System Libraries, or general-purpose tools or generally available free
+programs which are used unmodified in performing those activities but
+which are not part of the work.  For example, Corresponding Source
+includes interface definition files associated with source files for
+the work, and the source code for shared libraries and dynamically
+linked subprograms that the work is specifically designed to require,
+such as by intimate data communication or control flow between those
+subprograms and other parts of the work.
+
+  The Corresponding Source need not include anything that users
+can regenerate automatically from other parts of the Corresponding
+Source.
+
+  The Corresponding Source for a work in source code form is that
+same work.
+
+  2. Basic Permissions.
+
+  All rights granted under this License are granted for the term of
+copyright on the Program, and are irrevocable provided the stated
+conditions are met.  This License explicitly affirms your unlimited
+permission to run the unmodified Program.  The output from running a
+covered work is covered by this License only if the output, given its
+content, constitutes a covered work.  This License acknowledges your
+rights of fair use or other equivalent, as provided by copyright law.
+
+  You may make, run and propagate covered works that you do not
+convey, without conditions so long as your license otherwise remains
+in force.  You may convey covered works to others for the sole purpose
+of having them make modifications exclusively for you, or provide you
+with facilities for running those works, provided that you comply with
+the terms of this License in conveying all material for which you do
+not control copyright.  Those thus making or running the covered works
+for you must do so exclusively on your behalf, under your direction
+and control, on terms that prohibit them from making any copies of
+your copyrighted material outside their relationship with you.
+
+  Conveying under any other circumstances is permitted solely under
+the conditions stated below.  Sublicensing is not allowed; section 10
+makes it unnecessary.
+
+  3. Protecting Users' Legal Rights From Anti-Circumvention Law.
+
+  No covered work shall be deemed part of an effective technological
+measure under any applicable law fulfilling obligations under article
+11 of the WIPO copyright treaty adopted on 20 December 1996, or
+similar laws prohibiting or restricting circumvention of such
+measures.
+
+  When you convey a covered work, you waive any legal power to forbid
+circumvention of technological measures to the extent such circumvention
+is effected by exercising rights under this License with respect to
+the covered work, and you disclaim any intention to limit operation or
+modification of the work as a means of enforcing, against the work's
+users, your or third parties' legal rights to forbid circumvention of
+technological measures.
+
+  4. Conveying Verbatim Copies.
+
+  You may convey verbatim copies of the Program's source code as you
+receive it, in any medium, provided that you conspicuously and
+appropriately publish on each copy an appropriate copyright notice;
+keep intact all notices stating that this License and any
+non-permissive terms added in accord with section 7 apply to the code;
+keep intact all notices of the absence of any warranty; and give all
+recipients a copy of this License along with the Program.
+
+  You may charge any price or no price for each copy that you convey,
+and you may offer support or warranty protection for a fee.
+
+  5. Conveying Modified Source Versions.
+
+  You may convey a work based on the Program, or the modifications to
+produce it from the Program, in the form of source code under the
+terms of section 4, provided that you also meet all of these conditions:
+
+    a) The work must carry prominent notices stating that you modified
+    it, and giving a relevant date.
+
+    b) The work must carry prominent notices stating that it is
+    released under this License and any conditions added under section
+    7.  This requirement modifies the requirement in section 4 to
+    "keep intact all notices".
+
+    c) You must license the entire work, as a whole, under this
+    License to anyone who comes into possession of a copy.  This
+    License will therefore apply, along with any applicable section 7
+    additional terms, to the whole of the work, and all its parts,
+    regardless of how they are packaged.  This License gives no
+    permission to license the work in any other way, but it does not
+    invalidate such permission if you have separately received it.
+
+    d) If the work has interactive user interfaces, each must display
+    Appropriate Legal Notices; however, if the Program has interactive
+    interfaces that do not display Appropriate Legal Notices, your
+    work need not make them do so.
+
+  A compilation of a covered work with other separate and independent
+works, which are not by their nature extensions of the covered work,
+and which are not combined with it such as to form a larger program,
+in or on a volume of a storage or distribution medium, is called an
+"aggregate" if the compilation and its resulting copyright are not
+used to limit the access or legal rights of the compilation's users
+beyond what the individual works permit.  Inclusion of a covered work
+in an aggregate does not cause this License to apply to the other
+parts of the aggregate.
+
+  6. Conveying Non-Source Forms.
+
+  You may convey a covered work in object code form under the terms
+of sections 4 and 5, provided that you also convey the
+machine-readable Corresponding Source under the terms of this License,
+in one of these ways:
+
+    a) Convey the object code in, or embodied in, a physical product
+    (including a physical distribution medium), accompanied by the
+    Corresponding Source fixed on a durable physical medium
+    customarily used for software interchange.
+
+    b) Convey the object code in, or embodied in, a physical product
+    (including a physical distribution medium), accompanied by a
+    written offer, valid for at least three years and valid for as
+    long as you offer spare parts or customer support for that product
+    model, to give anyone who possesses the object code either (1) a
+    copy of the Corresponding Source for all the software in the
+    product that is covered by this License, on a durable physical
+    medium customarily used for software interchange, for a price no
+    more than your reasonable cost of physically performing this
+    conveying of source, or (2) access to copy the
+    Corresponding Source from a network server at no charge.
+
+    c) Convey individual copies of the object code with a copy of the
+    written offer to provide the Corresponding Source.  This
+    alternative is allowed only occasionally and noncommercially, and
+    only if you received the object code with such an offer, in accord
+    with subsection 6b.
+
+    d) Convey the object code by offering access from a designated
+    place (gratis or for a charge), and offer equivalent access to the
+    Corresponding Source in the same way through the same place at no
+    further charge.  You need not require recipients to copy the
+    Corresponding Source along with the object code.  If the place to
+    copy the object code is a network server, the Corresponding Source
+    may be on a different server (operated by you or a third party)
+    that supports equivalent copying facilities, provided you maintain
+    clear directions next to the object code saying where to find the
+    Corresponding Source.  Regardless of what server hosts the
+    Corresponding Source, you remain obligated to ensure that it is
+    available for as long as needed to satisfy these requirements.
+
+    e) Convey the object code using peer-to-peer transmission, provided
+    you inform other peers where the object code and Corresponding
+    Source of the work are being offered to the general public at no
+    charge under subsection 6d.
+
+  A separable portion of the object code, whose source code is excluded
+from the Corresponding Source as a System Library, need not be
+included in conveying the object code work.
+
+  A "User Product" is either (1) a "consumer product", which means any
+tangible personal property which is normally used for personal, family,
+or household purposes, or (2) anything designed or sold for incorporation
+into a dwelling.  In determining whether a product is a consumer product,
+doubtful cases shall be resolved in favor of coverage.  For a particular
+product received by a particular user, "normally used" refers to a
+typical or common use of that class of product, regardless of the status
+of the particular user or of the way in which the particular user
+actually uses, or expects or is expected to use, the product.  A product
+is a consumer product regardless of whether the product has substantial
+commercial, industrial or non-consumer uses, unless such uses represent
+the only significant mode of use of the product.
+
+  "Installation Information" for a User Product means any methods,
+procedures, authorization keys, or other information required to install
+and execute modified versions of a covered work in that User Product from
+a modified version of its Corresponding Source.  The information must
+suffice to ensure that the continued functioning of the modified object
+code is in no case prevented or interfered with solely because
+modification has been made.
+
+  If you convey an object code work under this section in, or with, or
+specifically for use in, a User Product, and the conveying occurs as
+part of a transaction in which the right of possession and use of the
+User Product is transferred to the recipient in perpetuity or for a
+fixed term (regardless of how the transaction is characterized), the
+Corresponding Source conveyed under this section must be accompanied
+by the Installation Information.  But this requirement does not apply
+if neither you nor any third party retains the ability to install
+modified object code on the User Product (for example, the work has
+been installed in ROM).
+
+  The requirement to provide Installation Information does not include a
+requirement to continue to provide support service, warranty, or updates
+for a work that has been modified or installed by the recipient, or for
+the User Product in which it has been modified or installed.  Access to a
+network may be denied when the modification itself materially and
+adversely affects the operation of the network or violates the rules and
+protocols for communication across the network.
+
+  Corresponding Source conveyed, and Installation Information provided,
+in accord with this section must be in a format that is publicly
+documented (and with an implementation available to the public in
+source code form), and must require no special password or key for
+unpacking, reading or copying.
+
+  7. Additional Terms.
+
+  "Additional permissions" are terms that supplement the terms of this
+License by making exceptions from one or more of its conditions.
+Additional permissions that are applicable to the entire Program shall
+be treated as though they were included in this License, to the extent
+that they are valid under applicable law.  If additional permissions
+apply only to part of the Program, that part may be used separately
+under those permissions, but the entire Program remains governed by
+this License without regard to the additional permissions.
+
+  When you convey a copy of a covered work, you may at your option
+remove any additional permissions from that copy, or from any part of
+it.  (Additional permissions may be written to require their own
+removal in certain cases when you modify the work.)  You may place
+additional permissions on material, added by you to a covered work,
+for which you have or can give appropriate copyright permission.
+
+  Notwithstanding any other provision of this License, for material you
+add to a covered work, you may (if authorized by the copyright holders of
+that material) supplement the terms of this License with terms:
+
+    a) Disclaiming warranty or limiting liability differently from the
+    terms of sections 15 and 16 of this License; or
+
+    b) Requiring preservation of specified reasonable legal notices or
+    author attributions in that material or in the Appropriate Legal
+    Notices displayed by works containing it; or
+
+    c) Prohibiting misrepresentation of the origin of that material, or
+    requiring that modified versions of such material be marked in
+    reasonable ways as different from the original version; or
+
+    d) Limiting the use for publicity purposes of names of licensors or
+    authors of the material; or
+
+    e) Declining to grant rights under trademark law for use of some
+    trade names, trademarks, or service marks; or
+
+    f) Requiring indemnification of licensors and authors of that
+    material by anyone who conveys the material (or modified versions of
+    it) with contractual assumptions of liability to the recipient, for
+    any liability that these contractual assumptions directly impose on
+    those licensors and authors.
+
+  All other non-permissive additional terms are considered "further
+restrictions" within the meaning of section 10.  If the Program as you
+received it, or any part of it, contains a notice stating that it is
+governed by this License along with a term that is a further
+restriction, you may remove that term.  If a license document contains
+a further restriction but permits relicensing or conveying under this
+License, you may add to a covered work material governed by the terms
+of that license document, provided that the further restriction does
+not survive such relicensing or conveying.
+
+  If you add terms to a covered work in accord with this section, you
+must place, in the relevant source files, a statement of the
+additional terms that apply to those files, or a notice indicating
+where to find the applicable terms.
+
+  Additional terms, permissive or non-permissive, may be stated in the
+form of a separately written license, or stated as exceptions;
+the above requirements apply either way.
+
+  8. Termination.
+
+  You may not propagate or modify a covered work except as expressly
+provided under this License.  Any attempt otherwise to propagate or
+modify it is void, and will automatically terminate your rights under
+this License (including any patent licenses granted under the third
+paragraph of section 11).
+
+  However, if you cease all violation of this License, then your
+license from a particular copyright holder is reinstated (a)
+provisionally, unless and until the copyright holder explicitly and
+finally terminates your license, and (b) permanently, if the copyright
+holder fails to notify you of the violation by some reasonable means
+prior to 60 days after the cessation.
+
+  Moreover, your license from a particular copyright holder is
+reinstated permanently if the copyright holder notifies you of the
+violation by some reasonable means, this is the first time you have
+received notice of violation of this License (for any work) from that
+copyright holder, and you cure the violation prior to 30 days after
+your receipt of the notice.
+
+  Termination of your rights under this section does not terminate the
+licenses of parties who have received copies or rights from you under
+this License.  If your rights have been terminated and not permanently
+reinstated, you do not qualify to receive new licenses for the same
+material under section 10.
+
+  9. Acceptance Not Required for Having Copies.
+
+  You are not required to accept this License in order to receive or
+run a copy of the Program.  Ancillary propagation of a covered work
+occurring solely as a consequence of using peer-to-peer transmission
+to receive a copy likewise does not require acceptance.  However,
+nothing other than this License grants you permission to propagate or
+modify any covered work.  These actions infringe copyright if you do
+not accept this License.  Therefore, by modifying or propagating a
+covered work, you indicate your acceptance of this License to do so.
+
+  10. Automatic Licensing of Downstream Recipients.
+
+  Each time you convey a covered work, the recipient automatically
+receives a license from the original licensors, to run, modify and
+propagate that work, subject to this License.  You are not responsible
+for enforcing compliance by third parties with this License.
+
+  An "entity transaction" is a transaction transferring control of an
+organization, or substantially all assets of one, or subdividing an
+organization, or merging organizations.  If propagation of a covered
+work results from an entity transaction, each party to that
+transaction who receives a copy of the work also receives whatever
+licenses to the work the party's predecessor in interest had or could
+give under the previous paragraph, plus a right to possession of the
+Corresponding Source of the work from the predecessor in interest, if
+the predecessor has it or can get it with reasonable efforts.
+
+  You may not impose any further restrictions on the exercise of the
+rights granted or affirmed under this License.  For example, you may
+not impose a license fee, royalty, or other charge for exercise of
+rights granted under this License, and you may not initiate litigation
+(including a cross-claim or counterclaim in a lawsuit) alleging that
+any patent claim is infringed by making, using, selling, offering for
+sale, or importing the Program or any portion of it.
+
+  11. Patents.
+
+  A "contributor" is a copyright holder who authorizes use under this
+License of the Program or a work on which the Program is based.  The
+work thus licensed is called the contributor's "contributor version".
+
+  A contributor's "essential patent claims" are all patent claims
+owned or controlled by the contributor, whether already acquired or
+hereafter acquired, that would be infringed by some manner, permitted
+by this License, of making, using, or selling its contributor version,
+but do not include claims that would be infringed only as a
+consequence of further modification of the contributor version.  For
+purposes of this definition, "control" includes the right to grant
+patent sublicenses in a manner consistent with the requirements of
+this License.
+
+  Each contributor grants you a non-exclusive, worldwide, royalty-free
+patent license under the contributor's essential patent claims, to
+make, use, sell, offer for sale, import and otherwise run, modify and
+propagate the contents of its contributor version.
+
+  In the following three paragraphs, a "patent license" is any express
+agreement or commitment, however denominated, not to enforce a patent
+(such as an express permission to practice a patent or covenant not to
+sue for patent infringement).  To "grant" such a patent license to a
+party means to make such an agreement or commitment not to enforce a
+patent against the party.
+
+  If you convey a covered work, knowingly relying on a patent license,
+and the Corresponding Source of the work is not available for anyone
+to copy, free of charge and under the terms of this License, through a
+publicly available network server or other readily accessible means,
+then you must either (1) cause the Corresponding Source to be so
+available, or (2) arrange to deprive yourself of the benefit of the
+patent license for this particular work, or (3) arrange, in a manner
+consistent with the requirements of this License, to extend the patent
+license to downstream recipients.  "Knowingly relying" means you have
+actual knowledge that, but for the patent license, your conveying the
+covered work in a country, or your recipient's use of the covered work
+in a country, would infringe one or more identifiable patents in that
+country that you have reason to believe are valid.
+
+  If, pursuant to or in connection with a single transaction or
+arrangement, you convey, or propagate by procuring conveyance of, a
+covered work, and grant a patent license to some of the parties
+receiving the covered work authorizing them to use, propagate, modify
+or convey a specific copy of the covered work, then the patent license
+you grant is automatically extended to all recipients of the covered
+work and works based on it.
+
+  A patent license is "discriminatory" if it does not include within
+the scope of its coverage, prohibits the exercise of, or is
+conditioned on the non-exercise of one or more of the rights that are
+specifically granted under this License.  You may not convey a covered
+work if you are a party to an arrangement with a third party that is
+in the business of distributing software, under which you make payment
+to the third party based on the extent of your activity of conveying
+the work, and under which the third party grants, to any of the
+parties who would receive the covered work from you, a discriminatory
+patent license (a) in connection with copies of the covered work
+conveyed by you (or copies made from those copies), or (b) primarily
+for and in connection with specific products or compilations that
+contain the covered work, unless you entered into that arrangement,
+or that patent license was granted, prior to 28 March 2007.
+
+  Nothing in this License shall be construed as excluding or limiting
+any implied license or other defenses to infringement that may
+otherwise be available to you under applicable patent law.
+
+  12. No Surrender of Others' Freedom.
+
+  If conditions are imposed on you (whether by court order, agreement or
+otherwise) that contradict the conditions of this License, they do not
+excuse you from the conditions of this License.  If you cannot convey a
+covered work so as to satisfy simultaneously your obligations under this
+License and any other pertinent obligations, then as a consequence you may
+not convey it at all.  For example, if you agree to terms that obligate you
+to collect a royalty for further conveying from those to whom you convey
+the Program, the only way you could satisfy both those terms and this
+License would be to refrain entirely from conveying the Program.
+
+  13. Remote Network Interaction; Use with the GNU General Public License.
+
+  Notwithstanding any other provision of this License, if you modify the
+Program, your modified version must prominently offer all users
+interacting with it remotely through a computer network (if your version
+supports such interaction) an opportunity to receive the Corresponding
+Source of your version by providing access to the Corresponding Source
+from a network server at no charge, through some standard or customary
+means of facilitating copying of software.  This Corresponding Source
+shall include the Corresponding Source for any work covered by version 3
+of the GNU General Public License that is incorporated pursuant to the
+following paragraph.
+
+  Notwithstanding any other provision of this License, you have
+permission to link or combine any covered work with a work licensed
+under version 3 of the GNU General Public License into a single
+combined work, and to convey the resulting work.  The terms of this
+License will continue to apply to the part which is the covered work,
+but the work with which it is combined will remain governed by version
+3 of the GNU General Public License.
+
+  14. Revised Versions of this License.
+
+  The Free Software Foundation may publish revised and/or new versions of
+the GNU Affero General Public License from time to time.  Such new versions
+will be similar in spirit to the present version, but may differ in detail to
+address new problems or concerns.
+
+  Each version is given a distinguishing version number.  If the
+Program specifies that a certain numbered version of the GNU Affero General
+Public License "or any later version" applies to it, you have the
+option of following the terms and conditions either of that numbered
+version or of any later version published by the Free Software
+Foundation.  If the Program does not specify a version number of the
+GNU Affero General Public License, you may choose any version ever published
+by the Free Software Foundation.
+
+  If the Program specifies that a proxy can decide which future
+versions of the GNU Affero General Public License can be used, that proxy's
+public statement of acceptance of a version permanently authorizes you
+to choose that version for the Program.
+
+  Later license versions may give you additional or different
+permissions.  However, no additional obligations are imposed on any
+author or copyright holder as a result of your choosing to follow a
+later version.
+
+  15. Disclaimer of Warranty.
+
+  THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY
+APPLICABLE LAW.  EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT
+HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY
+OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO,
+THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+PURPOSE.  THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM
+IS WITH YOU.  SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF
+ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
+
+  16. Limitation of Liability.
+
+  IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
+WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS
+THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY
+GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE
+USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF
+DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD
+PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS),
+EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF
+SUCH DAMAGES.
+
+  17. Interpretation of Sections 15 and 16.
+
+  If the disclaimer of warranty and limitation of liability provided
+above cannot be given local legal effect according to their terms,
+reviewing courts shall apply local law that most closely approximates
+an absolute waiver of all civil liability in connection with the
+Program, unless a warranty or assumption of liability accompanies a
+copy of the Program in return for a fee.
+
+                     END OF TERMS AND CONDITIONS
+
+            How to Apply These Terms to Your New Programs
+
+  If you develop a new program, and you want it to be of the greatest
+possible use to the public, the best way to achieve this is to make it
+free software which everyone can redistribute and change under these terms.
+
+  To do so, attach the following notices to the program.  It is safest
+to attach them to the start of each source file to most effectively
+state the exclusion of warranty; and each file should have at least
+the "copyright" line and a pointer to where the full notice is found.
+
+    <one line to give the program's name and a brief idea of what it does.>
+    Copyright (C) <year>  <name of author>
+
+    This program is free software: you can redistribute it and/or modify
+    it under the terms of the GNU Affero General Public License as published
+    by the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    This program is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU Affero General Public License for more details.
+
+    You should have received a copy of the GNU Affero General Public License
+    along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+Also add information on how to contact you by electronic and paper mail.
+
+  If your software can interact with users remotely through a computer
+network, you should also make sure that it provides a way for users to
+get its source.  For example, if your program is a web application, its
+interface could display a "Source" link that leads users to an archive
+of the code.  There are many ways you could offer source, and different
+solutions will be better for different programs; see section 13 for the
+specific requirements.
+
+  You should also get your employer (if you work as a programmer) or school,
+if any, to sign a "copyright disclaimer" for the program, if necessary.
+For more information on this, and how to apply and follow the GNU AGPL, see
+<https://www.gnu.org/licenses/>.

README.md

@@ -9,4 +9,41 @@ license: agpl-3.0
 short_description: A chat application with flows, agents and MCP support.
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# AIFlow Chat
+
+A chat application with flows, agents and MCP support, that interacts with AI models via the OpenAI-compatible API.
+
+> **Warning**: This tool is in development, made as a spare time project, and no warranty is given for any functionality.
+
+Key capabilities include:
+- **AI Interactions**: Stream responses from AI models. Generate text, tables, code, formulas (via LaTeX), and simple SVG images/charts.
+- **Tool Support**: Integrate external tools (e.g., web search) using MCP for real-time data fetching.
+- **Formatting & Usability**: Render Markdown, highlight code, display math equations, and add citations for tool outputs.
+- **Chat Management**: Multiple chats with save/load, editing/deleting messages, alternative responses, and branching conversations.
+
+### Usage
+
+#### Online Demo
+Test a (sometimes outdated version) at: [https://huggingface.co/spaces/dma123/aiflow-chat](https://huggingface.co/spaces/dma123/aiflow-chat).
+
+#### Local Setup
+1. Clone the repo: `git clone https://github.com/dmatscheko/aiflow-chat.git`
+2. Run a simple HTTP server: `python -m http.server 8000` (or use any static file server).
+3. Open `http://localhost:8000` in your browser.
+
+#### With MCP (for Tools)
+To enable advanced tools like web/X search:
+1. Clone the repo: `git clone https://github.com/dmatscheko/aiflow-chat.git`
+2. Customize tools via `mcp_config.json`.
+3. Run: `uv run main.py` (or `pip install fastmcp fastapi` and `python main.py`). This starts a web server at http://localhost:8000, a local MCP proxy at `http://localhost:3000/mcp`, and auto-configures the app.
+4. Open `http://localhost:8000` in your browser, if it is not automatically openend.
+
+#### Controls
+- **Input**: Type messages; use Shift+Enter (or Ctrl/Alt+Enter) to submit. Press Esc to abort AI responses.
+- **Chats**: Sidebar for multiple chats; edit titles, add/delete messages, navigate alternatives.
+- **Settings**: Tune sampling (temperature/top-p), manage API endpoints, refresh models, select role (user/system/assistant/tool).
+- **Avatars**: Click message avatars to upload custom images (stored locally).
+
+### Screenshot
+This screenshot was "randomly selected" because its output was ok-ish ;)
+![screenshot.png](screenshot.png)

_mcp_filesystem/read_write/guess_number.py

@@ -0,0 +1,35 @@
+import random
+
+
+def guess_the_number():
+    """Simple text-based 'Guess the Number' game."""
+    target = random.randint(1, 100)
+    attempts = 7
+    guessed = False
+
+    print("I'm thinking of a number between 1 and 100. You have 7 attempts to guess it.")
+
+    while attempts > 0 and not guessed:
+        try:
+            guess = int(input(f"Enter your guess (attempts left: {attempts}): "))
+            attempts -= 1
+
+            if guess == target:
+                print(f"🎉 Congratulations! You guessed the number {target} correctly!")
+                guessed = True
+            elif guess < target:
+                print("Too low! Try again.")
+            else:
+                print("Too high! Try again.")
+
+        except ValueError:
+            print("Please enter a valid integer.")
+            attempts += 1  # No penalty for invalid input
+
+    if not guessed:
+        print(f"❌ Game over! The number was {target}.")
+
+
+# Run the game
+if __name__ == "__main__":
+    guess_the_number()

_mcp_filesystem/read_write/poem.md

@@ -0,0 +1,9 @@
+In twilight's hush, where shadows play,  
+A single star begins to sway.  
+It whispers tales of distant skies,  
+Beneath the moon's soft, silver eyes.  
+
+The wind, a bard with gentle breath,  
+Sings secrets only night can tell.  
+And in the stillness, hearts take flight—  
+Bathed in the glow of endless night.

_mcp_servers/datetime-mcp/datetime-mcp.py

@@ -0,0 +1,22 @@
+"""
+This is an MCP server that provides a tool to get the current date and time.
+"""
+
+from fastmcp import FastMCP
+import datetime
+
+# Create an MCP server instance
+mcp = FastMCP("Date and Time Server")
+
+
+@mcp.tool()
+def get_current_datetime() -> str:
+    """
+    Get the current date and time in ISO format.
+    """
+    return datetime.datetime.now().isoformat()
+
+
+if __name__ == "__main__":
+    # Run the MCP server
+    mcp.run()

_mcp_servers/fetch-mcp/fetch-mcp.py

@@ -0,0 +1,26 @@
+"""
+This is an MCP server that provides a tool to get a web page.
+"""
+
+import urllib3
+from fastmcp import FastMCP
+import requests
+
+# Suppress SSL warnings
+urllib3.disable_warnings(urllib3.exceptions.InsecureRequestWarning)
+
+mcp = FastMCP("Web Page Fetcher")
+
+
+@mcp.tool
+def fetch_web_page(url: str) -> str:
+    """
+    Fetch the content of a web page given its URL. Supports HTTP and HTTPS, ignoring invalid SSL certificates.
+    """
+    response = requests.get(url, verify=False)
+    response.raise_for_status()  # Raise an error for bad status codes
+    return response.text
+
+
+if __name__ == "__main__":
+    mcp.run()

_mcp_servers/file_watcher-mcp/file_watcher-mcp.py

@@ -0,0 +1,74 @@
+from fastmcp import FastMCP
+import os
+import sys
+import time
+from pydantic import Field
+from typing import Annotated, Optional
+
+# Global variable for the watched directory
+_watched_dir: Optional[str] = None
+
+def set_watched_dir(real_dir: str) -> None:
+    """Configure the watched directory."""
+    global _watched_dir
+    _watched_dir = os.path.abspath(os.path.expanduser(real_dir))
+
+# Server setup
+mcp = FastMCP(
+    name="File Watcher Server",
+    instructions="A server that provides a tool to wait for a file to appear in a specific directory, read its content, and then delete it.",
+)
+
+
+@mcp.tool
+def wait_for_and_read_file(
+    filename: Annotated[str, Field(description="The name of the file to wait for in the watched directory.")],
+    timeout: Annotated[Optional[str], Field(description="The maximum number of seconds to wait for the file.")] = "60",
+) -> str:
+    """
+    Waits for a specific file to appear in the watched directory, reads its content,
+    deletes it, and returns the content.
+    """
+    if _watched_dir is None:
+        return "Error: The watched directory is not configured."
+
+    file_path = os.path.join(_watched_dir, filename)
+
+    timeout_seconds = 60
+    if timeout is not None:
+        try:
+            timeout_seconds = int(timeout)
+        except (ValueError, TypeError):
+            pass
+
+
+    start_time = time.time()
+    while not os.path.exists(file_path):
+        if time.time() - start_time > timeout_seconds:
+            return f"Error: Timed out after {timeout_seconds} seconds waiting for {filename}"
+        time.sleep(1)
+
+    try:
+        with open(file_path, "r", encoding="utf-8") as f:
+            content = f.read()
+        os.remove(file_path)
+        return content
+    except Exception as e:
+        return f"Error reading or deleting file {filename}: {e}"
+
+
+# Run the server with the watched directory from command-line arguments.
+if len(sys.argv) != 2:
+    print("Usage: file-watcher-mcp <watched-directory>")
+    sys.exit(1)
+
+real_dir = sys.argv[1]
+if not os.path.isdir(real_dir):
+    print(f"Error: {real_dir} is not a directory")
+    sys.exit(1)
+
+set_watched_dir(real_dir)
+print(f"MCP File Watcher Server running on stdio\nWatching directory: {_watched_dir}")
+
+if __name__ == "__main__":
+    mcp.run()

_mcp_servers/filesystem_read-mcp/filesystem_read-mcp.py

@@ -0,0 +1,265 @@
+from collections import deque
+from datetime import datetime
+import difflib
+import fnmatch
+from fastmcp import FastMCP
+import os
+from pydantic import BaseModel, Field, ValidationError
+import re
+import sys
+from typing import Annotated, Dict, List, Optional
+
+
+# Custom error class
+class CustomFileSystemError(ValueError):
+    """Custom error for filesystem operations."""
+
+    pass
+
+
+# Global mappings for directory access
+_allowed_real_dirs: List[str] = []  # Real file system paths
+_virtual_to_real: Dict[str, str] = {}  # Virtual path -> Real path
+_real_to_virtual: Dict[str, str] = {}  # Real path -> Virtual path
+
+
+def set_allowed_dirs(real_dirs: List[str]) -> None:
+    """Configure allowed real directories and map them to virtual paths (e.g., /data/a)."""
+    global _allowed_real_dirs, _virtual_to_real, _real_to_virtual
+    _allowed_real_dirs = [os.path.abspath(os.path.expanduser(d)) for d in real_dirs]
+    _virtual_to_real = {f"/data/{chr(97 + i)}": real_dir for i, real_dir in enumerate(_allowed_real_dirs)}
+    _real_to_virtual = {real_dir: virtual_dir for virtual_dir, real_dir in _virtual_to_real.items()}
+
+
+def validate_virtual_path(virtual_path: str) -> str:
+    """Convert a virtual path to a real path, ensuring it’s within allowed directories."""
+    for virtual_dir, real_dir in _virtual_to_real.items():
+        if virtual_path.startswith(virtual_dir + "/") or virtual_path == virtual_dir:
+            relative = virtual_path[len(virtual_dir) :].lstrip("/")
+            real_path = os.path.join(real_dir, relative) if relative else real_dir
+            break
+    else:
+        raise CustomFileSystemError(f"Not a valid path (List allowed directories for valid paths): {virtual_path}")
+
+    real_path = os.path.normpath(os.path.abspath(real_path))
+    try:
+        resolved_real_path = os.path.realpath(real_path)
+        if any(resolved_real_path.startswith(d + os.sep) or resolved_real_path == d for d in _allowed_real_dirs):
+            return resolved_real_path
+        raise PermissionError("Access denied")
+    except FileNotFoundError:
+        real_parent = os.path.realpath(os.path.dirname(real_path))
+        if not os.path.exists(real_parent):
+            raise FileNotFoundError("Parent directory not found")
+        if any(real_parent.startswith(d + os.sep) or real_parent == d for d in _allowed_real_dirs):
+            return real_path
+        raise PermissionError("Access denied")
+
+
+def get_error_message(message, virtual_path: str, e: Exception) -> str:
+    """Generate a user-friendly error message using the virtual path."""
+    virtual_path = virtual_path or "Unknown path"
+    if isinstance(e, FileNotFoundError):
+        return f"{message}: No such file or directory (List allowed directories for valid paths): {virtual_path}"
+    elif isinstance(e, PermissionError):
+        return f"{message}: Permission denied (List allowed directories for valid paths): {virtual_path}"
+    elif isinstance(e, IsADirectoryError):
+        return f"{message}: Is a directory: {virtual_path}"
+    elif isinstance(e, NotADirectoryError):
+        return f"{message}: Not a valid directory (List allowed directories for valid paths): {virtual_path}"
+    elif isinstance(e, FileExistsError):
+        return f"{message}: File already exists: {virtual_path}"
+    elif isinstance(e, CustomFileSystemError):
+        return f"{message}: {e}"
+    elif isinstance(e, ValidationError):
+        errors = e.errors()
+        error_details = "; ".join(f"{err['loc'][0]}: {err['msg']}" for err in errors)
+        return f"{message}: Input validation error: {error_details}"
+    elif isinstance(e, ValueError):
+        return f"{message}: Invalid value: {virtual_path}"
+    else:
+        return f"{message}: {virtual_path}"
+
+
+# File operation helpers
+def head_file(real_path: str, lines: int) -> str:
+    """Read first N lines of a file."""
+    with open(real_path, "r", encoding="utf-8") as f:
+        return "".join(line for i, line in enumerate(f) if i < lines)
+
+
+def tail_file(real_path: str, lines: int) -> str:
+    """Read last N lines of a file."""
+    with open(real_path, "r", encoding="utf-8") as f:
+        return "".join(deque(f, maxlen=lines))
+
+
+def apply_edits(virtual_path: str, edits: List[Dict[str, str]], dry_run: bool) -> str:
+    """Apply text replacements and return a diff."""
+    real_path = validate_virtual_path(virtual_path)
+    with open(real_path, "r", encoding="utf-8") as f:
+        content = new_content = f.read()
+    for edit in edits:
+        pattern = rf"^{re.escape(edit['oldText'])}(\r?\n|\r|$)"
+        new_content = re.sub(pattern, lambda m: edit["newText"] + m.group(1), new_content, flags=re.MULTILINE)
+    diff = "".join(difflib.unified_diff(content.splitlines(keepends=True), new_content.splitlines(keepends=True), fromfile=virtual_path, tofile=virtual_path))
+    if not dry_run:
+        with open(real_path, "w", encoding="utf-8") as f:
+            f.write(new_content)
+    return diff
+
+
+def list_files_recursive(virtual_path: str, pattern: Optional[str] = None, exclude_patterns: Optional[List[str]] = None) -> str:
+    """List files and directories recursively, optionally filtering by pattern."""
+    real_path = validate_virtual_path(virtual_path)
+    matches = []
+    for root, dirs, files in os.walk(real_path):
+        if exclude_patterns:
+            dirs[:] = [d for d in dirs if not any(fnmatch.fnmatch(d, p) for p in exclude_patterns)]
+            files = [f for f in files if not any(fnmatch.fnmatch(f, p) for p in exclude_patterns)]
+        rel_root = os.path.relpath(root, real_path) if root != real_path else ""
+        for name in dirs + files:
+            if pattern is None or fnmatch.fnmatch(name.lower(), pattern.lower()):
+                rel_path = os.path.join(rel_root, name).replace(os.sep, "/")
+                if os.path.isdir(os.path.join(root, name)):
+                    rel_path += "/"
+                matches.append(rel_path)
+    return "\n".join([f"### Contents of {virtual_path}:"] + sorted(matches))
+
+
+# Tool argument models
+class EditOp(BaseModel):
+    oldText: str = Field(..., description="Line to be replaced")
+    newText: str = Field(..., description="Replacement line")
+
+
+# Server setup
+mcp = FastMCP(
+    name="File System Server",
+    instructions="A server that provides tools for interacting with a file system. Only some paths are accessible, therefore the allowed directores must be listed initially.",
+)
+
+
+@mcp.tool
+def read_file(
+    path: Annotated[str, Field(description="The virtual path of the file to read.")],
+    head: Annotated[Optional[int], Field(description="The number of lines to read from the beginning of the file.")] = None,
+    tail: Annotated[Optional[int], Field(description="The number of lines to read from the end of the file.")] = None,
+) -> str:
+    """Read file contents from the secure file system. Allows reading the whole file, or just the head or tail."""
+    try:
+        real_path = validate_virtual_path(path)
+        if head is not None and tail is not None:
+            raise CustomFileSystemError("Specify either head or tail, not both")
+        if head is not None:
+            return head_file(real_path, head)
+        elif tail is not None:
+            return tail_file(real_path, tail)
+        else:
+            with open(real_path, "r", encoding="utf-8") as f:
+                return f.read()
+    except Exception as e:
+        return get_error_message("Error reading", path, e)
+
+
+@mcp.tool
+def read_multiple_files(paths: Annotated[List[str], Field(description="A list of virtual paths of the files to read.")]) -> str:
+    """Read the contents of multiple files efficiently."""
+    try:
+        results = []
+        seen = set()
+        for virtual_path in paths:
+            if virtual_path not in seen:
+                try:
+                    seen.add(virtual_path)
+                    real_path = validate_virtual_path(virtual_path)
+                    content = open(real_path, "r", encoding="utf-8").read()
+                    results.append(f"### {virtual_path}:\n```\n{content}\n```\n")
+                except Exception as e:
+                    results.append(f"### {virtual_path}:\n{get_error_message('Error reading', virtual_path, e)}\n")
+        return "\n".join(results)
+    except Exception as e:
+        return get_error_message("Error reading multiple files", None, e)
+
+
+@mcp.tool
+def list_directory(path: Annotated[str, Field(description="The virtual path of the directory to list.")]) -> str:
+    """List the files and directories within a given directory, indicating whether each entry is a file or a directory."""
+    try:
+        real_path = validate_virtual_path(path)
+        entries = os.listdir(real_path)
+        listing = [f"[{'DIR' if os.path.isdir(os.path.join(real_path, e)) else 'FILE'}] {e}" for e in entries]
+        return "\n".join(listing)
+    except Exception as e:
+        return get_error_message("Error listing", path, e)
+
+
+@mcp.tool
+def directory_tree(path: Annotated[str, Field(description="The virtual path of the root directory for the tree listing.")]) -> str:
+    """Show a recursive directory listing starting from the given path."""
+    try:
+        return list_files_recursive(path)
+    except Exception as e:
+        return get_error_message("Error listing", path, e)
+
+
+@mcp.tool
+def search_files(
+    path: Annotated[str, Field(description="The virtual path of the directory to start the search from.")],
+    pattern: Annotated[Optional[str], Field(description="A glob pattern to filter file and directory names (e.g., '*.py').")] = None,
+    excludePatterns: Annotated[Optional[List[str]], Field(description="A list of glob patterns to exclude files or directories.")] = None,
+) -> str:
+    """Search for files and directories by name pattern, with optional exclusions."""
+    try:
+        return list_files_recursive(path, pattern, excludePatterns)
+    except Exception as e:
+        return get_error_message("Error searching", path, e)
+
+
+@mcp.tool
+def get_file_info(path: Annotated[str, Field(description="The virtual path of the file or directory to get information about.")]) -> str:
+    """Get metadata for a file or directory, such as size, modification times, and permissions."""
+    try:
+
+        def format_time(timestamp):
+            return datetime.fromtimestamp(timestamp).strftime("%Y-%m-%d %H:%M:%S")
+
+        real_path = validate_virtual_path(path)
+        stats = os.stat(real_path)
+        info = {
+            "path": path,
+            "size": stats.st_size,
+            "created": format_time(stats.st_ctime),
+            "modified": format_time(stats.st_mtime),
+            "accessed": format_time(stats.st_atime),
+            "isDirectory": os.path.isdir(real_path),
+            "isFile": os.path.isfile(real_path),
+            "permissions": oct(stats.st_mode)[-3:],
+        }
+        return "\n".join(f"{k}: {v}" for k, v in info.items())
+    except Exception as e:
+        return get_error_message("Error getting info", path, e)
+
+
+@mcp.tool
+def list_allowed_directories() -> str:
+    """List the top-level virtual directories that are accessible."""
+    return "### Allowed directories:\n" + "\n".join(_virtual_to_real.keys())
+
+
+# Run the server with allowed directories from command-line arguments.
+if len(sys.argv) < 2:
+    print("Usage: filesystem <allowed-directory> [additional-directories...]")
+    sys.exit(1)
+real_dirs = sys.argv[1:]
+for real_dir in real_dirs:
+    if not os.path.isdir(real_dir):
+        print(f"Error: {real_dir} is not a directory")
+        sys.exit(1)
+set_allowed_dirs(real_dirs)
+virtual_dirs_mapping = "\n".join(f"{v} -> {r}" for v, r in _virtual_to_real.items())
+print(f"MCP Filesystem Server running on stdio\nVirtual to real directory mappings:\n{virtual_dirs_mapping}")
+
+
+if __name__ == "__main__":
+    mcp.run()

_mcp_servers/filesystem_write-mcp/filesystem_write-mcp.py

@@ -0,0 +1,213 @@
+from collections import deque
+from datetime import datetime
+import difflib
+import fnmatch
+from fastmcp import FastMCP
+import os
+from pydantic import BaseModel, Field, ValidationError
+import re
+import sys
+from typing import Annotated, Dict, List, Optional
+
+
+# Custom error class
+class CustomFileSystemError(ValueError):
+    """Custom error for filesystem operations."""
+
+    pass
+
+
+# Global mappings for directory access
+_allowed_real_dirs: List[str] = []  # Real file system paths
+_virtual_to_real: Dict[str, str] = {}  # Virtual path -> Real path
+_real_to_virtual: Dict[str, str] = {}  # Real path -> Virtual path
+
+
+def set_allowed_dirs(real_dirs: List[str]) -> None:
+    """Configure allowed real directories and map them to virtual paths (e.g., /data/a)."""
+    global _allowed_real_dirs, _virtual_to_real, _real_to_virtual
+    _allowed_real_dirs = [os.path.abspath(os.path.expanduser(d)) for d in real_dirs]
+    _virtual_to_real = {f"/data/{chr(97 + i)}": real_dir for i, real_dir in enumerate(_allowed_real_dirs)}
+    _real_to_virtual = {real_dir: virtual_dir for virtual_dir, real_dir in _virtual_to_real.items()}
+
+
+def validate_virtual_path(virtual_path: str) -> str:
+    """Convert a virtual path to a real path, ensuring it’s within allowed directories."""
+    for virtual_dir, real_dir in _virtual_to_real.items():
+        if virtual_path.startswith(virtual_dir + "/") or virtual_path == virtual_dir:
+            relative = virtual_path[len(virtual_dir) :].lstrip("/")
+            real_path = os.path.join(real_dir, relative) if relative else real_dir
+            break
+    else:
+        raise CustomFileSystemError(f"Not a valid path (List allowed directories for valid paths): {virtual_path}")
+
+    real_path = os.path.normpath(os.path.abspath(real_path))
+    try:
+        resolved_real_path = os.path.realpath(real_path)
+        if any(resolved_real_path.startswith(d + os.sep) or resolved_real_path == d for d in _allowed_real_dirs):
+            return resolved_real_path
+        raise PermissionError("Access denied")
+    except FileNotFoundError:
+        real_parent = os.path.realpath(os.path.dirname(real_path))
+        if not os.path.exists(real_parent):
+            raise FileNotFoundError("Parent directory not found")
+        if any(real_parent.startswith(d + os.sep) or real_parent == d for d in _allowed_real_dirs):
+            return real_path
+        raise PermissionError("Access denied")
+
+
+def get_error_message(message, virtual_path: str, e: Exception) -> str:
+    """Generate a user-friendly error message using the virtual path."""
+    virtual_path = virtual_path or "Unknown path"
+    if isinstance(e, FileNotFoundError):
+        return f"{message}: No such file or directory: {virtual_path}"
+    elif isinstance(e, PermissionError):
+        return f"{message}: Permission denied: {virtual_path}"
+    elif isinstance(e, IsADirectoryError):
+        return f"{message}: Is a directory: {virtual_path}"
+    elif isinstance(e, NotADirectoryError):
+        return f"{message}: Not a directory: {virtual_path}"
+    elif isinstance(e, FileExistsError):
+        return f"{message}: File already exists: {virtual_path}"
+    elif isinstance(e, CustomFileSystemError):
+        return f"{message}: {e}"
+    elif isinstance(e, ValidationError):
+        errors = e.errors()
+        error_details = "; ".join(f"{err['loc'][0]}: {err['msg']}" for err in errors)
+        return f"{message}: Input validation error: {error_details}"
+    elif isinstance(e, ValueError):
+        return f"{message}: Invalid value: {virtual_path}"
+    else:
+        return f"{message}: {virtual_path}"
+
+
+# File operation helpers
+def head_file(real_path: str, lines: int) -> str:
+    """Read first N lines of a file."""
+    with open(real_path, "r", encoding="utf-8") as f:
+        return "".join(line for i, line in enumerate(f) if i < lines)
+
+
+def tail_file(real_path: str, lines: int) -> str:
+    """Read last N lines of a file."""
+    with open(real_path, "r", encoding="utf-8") as f:
+        return "".join(deque(f, maxlen=lines))
+
+
+def apply_edits(virtual_path: str, edits: List[Dict[str, str]], dry_run: bool) -> str:
+    """Apply text replacements and return a diff."""
+    real_path = validate_virtual_path(virtual_path)
+    with open(real_path, "r", encoding="utf-8") as f:
+        content = new_content = f.read()
+    for edit in edits:
+        pattern = rf"^{re.escape(edit['oldText'])}(\r?\n|\r|$)"
+        new_content = re.sub(pattern, lambda m: edit["newText"] + m.group(1), new_content, flags=re.MULTILINE)
+    diff = "".join(difflib.unified_diff(content.splitlines(keepends=True), new_content.splitlines(keepends=True), fromfile=virtual_path, tofile=virtual_path))
+    if not dry_run:
+        with open(real_path, "w", encoding="utf-8") as f:
+            f.write(new_content)
+    return diff
+
+
+def list_files_recursive(virtual_path: str, pattern: Optional[str] = None, exclude_patterns: Optional[List[str]] = None) -> str:
+    """List files and directories recursively, optionally filtering by pattern."""
+    real_path = validate_virtual_path(virtual_path)
+    matches = []
+    for root, dirs, files in os.walk(real_path):
+        if exclude_patterns:
+            dirs[:] = [d for d in dirs if not any(fnmatch.fnmatch(d, p) for p in exclude_patterns)]
+            files = [f for f in files if not any(fnmatch.fnmatch(f, p) for p in exclude_patterns)]
+        rel_root = os.path.relpath(root, real_path) if root != real_path else ""
+        for name in dirs + files:
+            if pattern is None or fnmatch.fnmatch(name.lower(), pattern.lower()):
+                rel_path = os.path.join(rel_root, name).replace(os.sep, "/")
+                if os.path.isdir(os.path.join(root, name)):
+                    rel_path += "/"
+                matches.append(rel_path)
+    return "\n".join([f"### Contents of {virtual_path}:"] + sorted(matches))
+
+
+# Tool argument models
+class EditOp(BaseModel):
+    oldText: str = Field(..., description="Line to be replaced")
+    newText: str = Field(..., description="Replacement line")
+
+
+# Server setup
+mcp = FastMCP(
+    name="File System Server",
+    instructions="A server that provides tools for interacting with a file system. Only some paths are accessible, therefore the allowed directores must be listed initially.",
+)
+
+
+@mcp.tool
+def write_file(
+    path: Annotated[str, Field(description="The virtual path of the file to write to. If the file exists, it will be overwritten.")],
+    content: Annotated[str, Field(description="The content to write to the file.")],
+) -> str:
+    """Write or overwrite a file with the given text content."""
+    try:
+        real_path = validate_virtual_path(path)
+        with open(real_path, "w", encoding="utf-8") as f:
+            f.write(content)
+        return f"Wrote to {path}"
+    except Exception as e:
+        return get_error_message("Error writing", path, e)
+
+
+@mcp.tool
+def edit_file(
+    path: Annotated[str, Field(description="The virtual path of the file to edit.")],
+    edits: Annotated[List[EditOp], Field(description="A list of replacement operations to apply to the file.")],
+    dryRun: Annotated[bool, Field(description="If true, returns a diff of the changes without applying them.")] = False,
+) -> str:
+    """Edit a file with line-based replacements and returns a diff of the changes."""
+    try:
+        diff = apply_edits(path, [{"oldText": e.oldText, "newText": e.newText} for e in edits], dryRun)
+        return diff
+    except Exception as e:
+        return get_error_message("Error editing", path, e)
+
+
+@mcp.tool
+def create_directory(path: Annotated[str, Field(description="The virtual path of the directory to create. It can be nested (e.g., /data/a/new/dir).")]) -> str:
+    """Create a directory, including any necessary parent directories."""
+    try:
+        real_path = validate_virtual_path(path)
+        os.makedirs(real_path, exist_ok=True)
+        return f"Created {path}"
+    except Exception as e:
+        return get_error_message("Error creating", path, e)
+
+
+@mcp.tool
+def move_file(
+    source: Annotated[str, Field(description="The virtual path of the file or directory to move.")],
+    destination: Annotated[str, Field(description="The new virtual path for the file or directory.")],
+) -> str:
+    """Move or rename a file or directory. This operation will fail if the destination already exists."""
+    try:
+        real_source = validate_virtual_path(source)
+        real_destination = validate_virtual_path(destination)
+        os.rename(real_source, real_destination)
+        return f"Moved {source} to {destination}"
+    except Exception as e:
+        return get_error_message("Error moving", source, e)
+
+
+# Run the server with allowed directories from command-line arguments.
+if len(sys.argv) < 2:
+    print("Usage: filesystem <allowed-directory> [additional-directories...]")
+    sys.exit(1)
+real_dirs = sys.argv[1:]
+for real_dir in real_dirs:
+    if not os.path.isdir(real_dir):
+        print(f"Error: {real_dir} is not a directory")
+        sys.exit(1)
+set_allowed_dirs(real_dirs)
+virtual_dirs_mapping = "\n".join(f"{v} -> {r}" for v, r in _virtual_to_real.items())
+print(f"MCP Filesystem Server running on stdio\nVirtual to real directory mappings:\n{virtual_dirs_mapping}")
+
+
+if __name__ == "__main__":
+    mcp.run()

css/3rdparty/hljs_androidstudio.min.css

@@ -0,0 +1 @@
+pre code.hljs{display:block;overflow-x:auto;padding:1em}code.hljs{padding:3px 5px}.hljs{color:#a9b7c6;background:#282b2e}.hljs-bullet,.hljs-literal,.hljs-number,.hljs-symbol{color:#6897bb}.hljs-deletion,.hljs-keyword,.hljs-selector-tag{color:#cc7832}.hljs-link,.hljs-template-variable,.hljs-variable{color:#629755}.hljs-comment,.hljs-quote{color:grey}.hljs-meta{color:#bbb529}.hljs-addition,.hljs-attribute,.hljs-string{color:#6a8759}.hljs-section,.hljs-title,.hljs-type{color:#ffc66d}.hljs-name,.hljs-selector-class,.hljs-selector-id{color:#e8bf6a}.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:700}

css/agents.css

@@ -0,0 +1,382 @@
+/* Styles for the agents and flow tabs */
+
+#tabs {
+    display: flex;
+    border-bottom: 1px solid var(--border-color);
+    align-items: center;
+}
+
+#maximize-button {
+    margin-left: auto;
+    margin-right: 10px;
+}
+
+.tab-button {
+    padding: 10px 20px;
+    cursor: pointer;
+    border: none;
+    background-color: transparent;
+    border-bottom: 2px solid transparent;
+    font-size: 1em;
+    color: var(--text-color);
+}
+
+.tab-button.active {
+    border-bottom: 2px solid var(--text-color-hover);
+    font-weight: bold;
+}
+
+.tab-pane {
+    display: none;
+    padding: 10px;
+    flex-grow: 1;
+    overflow-y: auto;
+}
+
+.tab-pane.active {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+
+#chat-tab-pane {
+    padding: 0;
+}
+
+#tab-content {
+    flex-grow: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+/* --- Generic Styles for Agents/Flow Tabs --- */
+.agents-flow-toolbar {
+    margin-bottom: 10px;
+    padding-bottom: 10px;
+    border-bottom: 1px solid var(--border-color);
+    display: flex;
+    gap: 10px;
+}
+
+.agents-flow-btn {
+    background-color: var(--tool-button-bg);
+    border: 1px solid var(--border-color);
+    color: var(--text-color);
+    padding: 5px 10px;
+    border-radius: 4px;
+    cursor: pointer;
+}
+.agents-flow-btn:hover {
+    background-color: var(--tool-button-bg-hover);
+    color: var(--text-color-hover);
+}
+
+
+/* --- Agents Tab Styles --- */
+#agent-list {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.agent-card {
+    border: 1px solid var(--border-color);
+    border-radius: 5px;
+    padding: 15px;
+    background-color: var(--accent-bg);
+}
+
+.agent-card.active {
+    border-color: var(--text-color-hover);
+    box-shadow: 0 0 5px var(--text-color-hover);
+}
+
+.agent-card h3 {
+    margin-top: 0;
+}
+
+.agent-card-buttons {
+    margin-top: 10px;
+    display: flex;
+    gap: 5px;
+}
+
+#agent-form-container {
+    margin-top: 20px;
+    border-top: 1px solid var(--border-color);
+    padding-top: 20px;
+    background-color: var(--settings-bg);
+    padding: 15px;
+    border-radius: 5px;
+}
+
+#agent-form label {
+    display: block;
+    margin-bottom: 5px;
+}
+
+#agent-form input[type="text"],
+#agent-form textarea {
+    width: 100%;
+    padding: 8px;
+    margin-bottom: 10px;
+    border-radius: 3px;
+    background-color: var(--input-bg);
+    border: 1px solid var(--input-border);
+    color: var(--text-color);
+    box-sizing: border-box;
+}
+
+#agent-form-buttons {
+    margin-top: 10px;
+}
+
+/* --- Flow Tab Styles --- */
+#flow-canvas-wrapper {
+    flex-grow: 1;
+    overflow: auto;
+    position: relative;
+    background-color: var(--accent-bg);
+    border-radius: 5px;
+}
+
+#flow-canvas {
+    position: relative;
+    width: 2000px;
+    height: 2000px;
+    cursor: grab;
+}
+
+#flow-canvas.panning {
+    cursor: grabbing;
+}
+
+#flow-svg-layer {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    z-index: 1;
+}
+
+#flow-node-container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 2;
+}
+
+.flow-step-card {
+    position: absolute;
+    width: 250px;
+    border: 1px solid var(--border-color);
+    border-radius: 5px;
+    padding: 10px;
+    background-color: var(--bg-color);
+    cursor: move;
+    z-index: 10;
+    transition: width 0.2s, height 0.2s;
+}
+
+.minimize-flow-step-btn {
+    position: absolute;
+    top: 5px;
+    left: 5px;
+    width: 16px;
+    height: 16px;
+    background-color: var(--tool-button-bg);
+    border: 1px solid var(--border-color);
+    color: var(--text-color);
+    border-radius: 4px;
+    cursor: pointer;
+    z-index: 12;
+    padding: 0;
+    line-height: 14px;
+    text-align: center;
+    font-size: 14px;
+}
+
+.flow-step-card.minimized {
+    width: 125px;
+    height: 40px;
+    padding-top: 25px;
+}
+
+.flow-step-card.minimized .flow-step-content {
+    display: none;
+}
+
+.flow-step-card.minimized h4 {
+    font-size: 0.8em;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.flow-step-input {
+    width: 100%;
+    padding: 8px;
+    margin-top: 5px;
+    margin-bottom: 10px;
+    border-radius: 3px;
+    background-color: var(--input-bg);
+    border: 1px solid var(--input-border);
+    color: var(--text-color);
+    box-sizing: border-box;
+}
+
+.flow-step-card-buttons {
+    margin-top: 10px;
+}
+
+.connector {
+    position: absolute;
+    width: 12px;
+    height: 12px;
+    background-color: var(--input-bg);
+    border: 1px solid var(--text-color);
+    border-radius: 50%;
+    cursor: pointer;
+    z-index: 11;
+}
+.connector:hover {
+    background-color: var(--text-color-hover);
+}
+
+.connector.top {
+    top: -6px;
+    left: calc(50% - 6px);
+}
+
+.connector.bottom {
+    bottom: -6px;
+    left: calc(50% - 6px);
+}
+
+.connector-group {
+    display: flex;
+    justify-content: space-around;
+}
+
+.connector-group .connector {
+    position: relative; /* Override absolute positioning */
+    top: auto;
+    left: auto;
+    bottom: -16px;
+}
+
+.connector-label {
+    position: absolute;
+    top: -2px;
+    left: 15px;
+}
+
+.flow-step-card.minimized .connector-group .connector {
+    bottom: 8px;
+}
+
+/* --- Dropdown for Add Step --- */
+.dropdown {
+    position: relative;
+    display: inline-block;
+}
+
+.dropdown-content {
+    display: none;
+    position: absolute;
+    background-color: var(--accent-bg);
+    min-width: 160px;
+    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
+    z-index: 12; /* Higher than flow-step-card */
+    border-radius: 4px;
+    border: 1px solid var(--border-color);
+}
+
+.dropdown-content a {
+    color: var(--text-color);
+    padding: 8px 12px;
+    text-decoration: none;
+    display: block;
+    font-size: 0.9em;
+}
+
+.dropdown-content a:hover {
+    background-color: var(--tool-button-bg-hover);
+    color: var(--text-color-hover);
+}
+
+.dropdown-content.show {
+    display: block;
+}
+
+/* --- Special Flow Step Styles --- */
+.flow-step-simple-prompt {
+    background-color: hsla(0, 0%, 35%, 0.8);
+}
+
+.flow-step-conditional-stop {
+    background-color: hsla(200, 20%, 35%, 0.8);
+}
+
+.flow-step-multi-prompt {
+    background-color: hsla(145, 20%, 35%, 0.8);
+}
+
+.flow-step-branching-prompt {
+    background-color: hsla(30, 20%, 35%, 0.8);
+}
+
+.flow-step-consolidator {
+    background-color: hsla(280, 20%, 35%, 0.8);
+}
+
+.flow-step-prompt-and-clear {
+    background-color: hsla(0, 0%, 15%, 0.8);
+}
+
+.agent-model-settings-group {
+    border: 1px solid var(--border-color);
+    padding: 10px;
+    margin-top: 10px;
+    border-radius: 5px;
+}
+
+/*
+.model-list-fieldset .model-list-row {
+    display: flex;
+    align-items: center;
+    margin-bottom: 5px;
+}
+
+.model-list-fieldset .model-list-row input[type="radio"] {
+    margin-right: 10px;
+    margin-bottom: 0;
+}
+*/
+
+
+.agent-model-settings-group .model-list-fieldset .model-list-row {
+    display: flex;
+}
+
+.model-list-fieldset .model-list-row input[type="radio"] {
+    margin-right: 6px;
+}
+
+.agent-model-settings-group .model-list-fieldset .model-list-row input[type="radio"] {
+    margin-top: -8px;
+}
+
+
+#run-flow-btn {
+    background-color: hsl(120, 100%, 20%);
+}
+
+#run-flow-btn:hover {
+    background-color: hsl(120, 100%, 35%);
+}

css/main.css

@@ -0,0 +1,564 @@
+/* Global styles */
+:root {
+    --bg-color: #202122;
+    --text-color: #efeff0;
+    --text-color-hover: #fafafb;
+    --accent-bg: #343542;
+    --accent-bg-hover: #40424f;
+    --border-color: #20212280;
+    --link-color: #aaa;
+    --link-hover: underline;
+    --error-bg: #ff3333a0;
+    --error-text: #fff;
+    --think-bg: #282b2e60;
+    --think-border: #ffffff15;
+    --scrollbar-bg: #00000000;
+    --scrollbar-thumb: #ffffff15;
+    --scrollbar-thumb-hover: #909090;
+    --message-ping-bg: #383333;
+    --message-pong-bg: #333338;
+    --message-system-bg: #583333;
+    --table-border: #d9d9e2;
+    --table-th-bg: #ececf033;
+    --table-text: #d1d5db;
+    --hljs-bg: #282b2e60;
+    --tool-button-bg: #ffffff10;
+    --tool-button-bg-hover: #ffffff30;
+    --tool-button-small-bg: #ffffff10;
+    --tool-button-small-bg-hover: #ffffff30;
+    --settings-bg: #343542dd;
+    --input-bg: #40424f;
+    --input-border: #20212280;
+}
+
+html, body {
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    font-family: Helvetica, sans-serif;
+    color: var(--text-color);
+    background-color: var(--bg-color);
+}
+
+/* Main column container */
+#colContainer {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    max-width: 75%;
+    margin-left: auto;
+    margin-right: auto;
+    transition: max-width 0.3s ease-in-out;
+}
+
+body.maximized-view #colContainer {
+    max-width: 100%;
+}
+
+/* Header section */
+#header {
+    margin: 0;
+    padding: 12px;
+    text-align: center;
+}
+#header:has(+#mainContent #chatContainer>#chat>.message) {
+    display: none;
+}
+
+/* Main content flex row */
+#mainContent {
+    display: flex;
+    flex: 1;
+    overflow: hidden;
+}
+
+/* Chat list container */
+#chatListContainer {
+    width: 250px;
+    background-color: var(--accent-bg);
+    padding: 10px;
+    border-right: 1px solid var(--border-color);
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow: hidden;
+    box-sizing: border-box;
+}
+#chatListWrapper {
+    flex: 1;
+    overflow-y: auto;
+}
+#chatList {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+#chatControls {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 10px;
+    padding-top: 10px;
+    border-top: 1px solid var(--border-color);
+}
+#chatControls .left-buttons {
+    display: flex;
+    gap: 5px;
+}
+.chat-item {
+    padding: 10px;
+    cursor: pointer;
+    list-style: none;
+    border-bottom: 1px solid var(--border-color);
+    display: flex;
+    align-items: center;
+}
+.chat-item.active {
+    background-color: var(--accent-bg-hover);
+    border-radius: 5px;
+}
+.chat-item span {
+    flex: 1;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    cursor: pointer; /* Indicates it's clickable for selection */
+}
+.chat-item input {
+    flex: 1;
+    background: transparent;
+    border: none;
+    color: var(--text-color);
+    outline: none;
+}
+.chat-item button {
+    margin-left: 5px;
+    opacity: 0;
+    transition: opacity 0.2s;
+}
+.chat-item:hover button {
+    opacity: 1;
+}
+
+/* Chat area */
+#chatArea {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+/* Tab Bar */
+#tabs {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+
+#main-tabs {
+    display: flex;
+    align-items: center;
+}
+
+#tab-buttons {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+}
+
+#tab-buttons #source {
+    padding: 0 5px;
+    font-size: small;
+}
+
+/* Chat display container */
+#chatContainer {
+    flex: 1;
+    padding: 10px 0;
+    overflow-y: overlay;
+}
+
+/* Input area container */
+#inputContainer {
+    padding: 8px;
+    background-color: var(--accent-bg);
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    border-top-left-radius: 8px;
+    border-top-right-radius: 8px;
+}
+#inputContainer textarea {
+    width: 100%;
+    resize: none;
+    border: 1px solid var(--input-border);
+    outline: none;
+    border-radius: 5px;
+    background-color: var(--input-bg);
+    color: var(--text-color);
+    padding: 8px;
+    margin-right: 8px;
+}
+
+/* Generic tool buttons */
+.toolButton {
+    background-color: var(--tool-button-bg);
+    border: 1px solid var(--border-color);
+    color: var(--text-color);
+    border: none;
+    padding: 2px;
+    margin: 1px 0;
+    border-radius: 4px;
+    width: 35px;
+    height: 29px;
+    cursor: pointer;
+}
+.toolButton:hover {
+    background-color: var(--tool-button-bg-hover);
+    color: var(--text-color-hover);
+}
+.toolButton.small {
+    background-color: var(--tool-button-small-bg);
+    padding: 0;
+    margin: 0;
+    width: 26px;
+    height: 18px;
+}
+.toolButton.small:hover {
+    background-color: var(--tool-button-small-bg-hover);
+    color: var(--text-color-hover);
+}
+
+a {
+    color: var(--link-color);
+    text-decoration: none;
+}
+a:hover {
+    text-decoration: var(--link-hover);
+}
+
+/* Settings dialog styles */
+#settings {
+    display: none;
+    white-space: nowrap;
+    width: fit-content;
+    font-size: 14px;
+    padding: 8px;
+    background-color: var(--settings-bg);
+    border-radius: 8px;
+    position: absolute;
+    bottom: 100px;
+    right: 10px;
+}
+#settings.open {
+    display: block;
+}
+#settings p {
+    margin: 8px 0;
+}
+
+/* Chat message flow */
+#chat {
+    display: flex;
+    flex-direction: column;
+    min-height: 200px;
+    white-space: pre-wrap;
+    overflow-wrap: break-word;
+    word-break: break-word;
+}
+#chat > .message {
+    margin: 8px;
+    margin-bottom: 0;
+    padding: 8px;
+    border-radius: 16px;
+}
+#chat > .ping {
+    background-color: var(--message-ping-bg);
+    margin-left: 40px;
+    margin-right: 0;
+    border-bottom-right-radius: 0;
+}
+#chat > .pong {
+    background-color: var(--message-pong-bg);
+    margin-left: 0;
+    margin-right: 40px;
+    border-bottom-left-radius: 0;
+    margin-bottom: 8px;
+}
+#chat > .system {
+    background-color: var(--message-system-bg);
+}
+#chat .avatar {
+    width: 24px;
+    height: 24px;
+    object-fit: cover;
+    float: left;
+    margin-right: 8px;
+    border-radius: 3px;
+}
+#chat p {
+    margin-block-start: .3em;
+    margin-block-end: .3em;
+}
+#chat pre {
+    margin: .3em 0;
+    white-space: pre-wrap;
+}
+#chat table {
+    width: 100%;
+    border-collapse: separate;
+    border-spacing: 0;
+    border-right: 1px solid var(--table-border);
+    border-bottom: 1px solid var(--table-border);
+    border-radius: 5px;
+    font-size: 14px;
+}
+#chat td,
+#chat th {
+    padding: 5px 8px;
+    border-left: 1px solid var(--table-border);
+    border-top: 1px solid var(--table-border);
+    color: var(--table-text);
+}
+#chat th {
+    text-align: left;
+    background-color: var(--table-th-bg);
+    color: var(--text-color);
+}
+#chat th:first-of-type {
+    border-top-left-radius: 5px;
+}
+#chat th:last-of-type {
+    border-top-right-radius: 5px;
+}
+#chat tr:last-of-type td:first-of-type {
+    border-bottom-left-radius: 5px;
+}
+#chat tr:last-of-type td:last-of-type {
+    border-bottom-right-radius: 5px;
+}
+#chat .katex-html {
+    display: none;
+    font-size: 0;
+}
+#chat .katex-error {
+    display: block;
+}
+#chat .hljs > svg,
+#chat .content img {
+    max-width: 50%;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+/* Thinking area styles */
+#chat details.think {
+    background-color: var(--think-bg);
+    padding: 8px;
+    border-radius: 5px;
+    margin: 8px 0;
+    border: 1px solid var(--think-border);
+}
+#chat details.think > summary {
+    cursor: pointer;
+    font-weight: bold;
+    color: var(--text-color);
+}
+#chat details.think > .think-content {
+    padding: 8px 0;
+}
+
+/* Scrollbar customization */
+::-webkit-scrollbar {
+    width: 10px;
+    background-color: var(--scrollbar-bg);
+}
+::-webkit-scrollbar-thumb {
+    background-color: var(--scrollbar-thumb);
+    border-radius: 4px;
+}
+::-webkit-scrollbar-thumb:hover {
+    background-color: var(--scrollbar-thumb-hover);
+}
+
+/* Session styles */
+#session {
+    text-align: right;
+}
+#session-login, #session-logout {
+    display: none;
+    margin-top: 8px;
+    text-align: center;
+}
+
+/* Highlight.js styles */
+.hljs {
+    padding: 8px;
+    border-radius: 5px;
+    background-color: var(--hljs-bg);
+}
+
+/* Generic utility classes */
+.nobreak {
+    white-space: nowrap;
+}
+.right {
+    float: right;
+}
+.clickable {
+    cursor: pointer;
+}
+
+#chatListContainer.hidden {
+    display: none;
+}
+
+/* Mobile-specific styles */
+@media only screen and (max-width: 1037px) {
+    .only-desktop {
+        display: none;
+    }
+    #colContainer {
+        max-width: 100%;
+    }
+    #chatListContainer {
+        position: absolute;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        z-index: 10;
+        width: 250px;
+    }
+}
+
+/* Desktop-specific styles */
+@media only screen and (min-width: 1038px) {
+    .only-mobile {
+        display: none;
+    }
+    body:not(.maximized-view) #chatListContainer {
+        display: flex !important;
+    }
+
+    /* --- NORMAL DESKTOP VIEW --- */
+    body:not(.maximized-view) #source {
+        position: fixed;
+        bottom: 10px;
+        left: 10px;
+    }
+
+    body:not(.maximized-view) #settingsButton {
+        position: fixed;
+        bottom: 10px;
+        right: 10px;
+    }
+
+    /* --- MAXIMIZED DESKTOP VIEW --- */
+    body.maximized-view #toggleChatList {
+        display: inline-block;
+    }
+}
+
+/* Print styles */
+@media print {
+    html, body {
+        background-color: #fff;
+    }
+    #chatContainer {
+        overflow: visible;
+    }
+    #inputContainer, #header, #buttons, #settings, #spacerBottom, #source, #chatListContainer {
+        display: none;
+    }
+    #colContainer {
+        max-width: 100%;
+        width: 100%;
+    }
+    .clip-badge-copy-icon, button {
+        display: none;
+    }
+    #chat > .ping {
+        border: 1px solid var(--message-ping-bg);
+    }
+    #chat > .pong {
+        border: 1px solid var(--message-pong-bg);
+    }
+    #chat > .system {
+        border: 1px solid var(--message-system-bg);
+    }
+    #chat .hljs > svg,
+    #chat .content img {
+        max-width: 100%;
+    }
+}
+
+/* Message button hover visibility */
+/*
+.msg_mod-add-btn, .msg_mod-del-btn, .msg_mod-prev-btn, .msg_mod-next-btn {
+    opacity: 0.2;
+    transition: opacity 0.2s;
+}
+.message:hover .msg_mod-add-btn, .message:hover .msg_mod-del-btn, .message:hover .msg_mod-prev-btn, .message:hover .msg_mod-next-btn {
+    opacity: 1;
+}
+*/
+
+/* Error bubble styles */
+#error-bubble {
+    display: none;
+    position: fixed;
+    top: 20px;
+    right: 20px;
+    background-color: var(--error-bg);
+    color: var(--error-text);
+    padding: 24px;
+    border-radius: 12px;
+    max-width: 400px;
+    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.7);
+    z-index: 1000;
+    animation: bubbleAppear 0.5s ease-out;
+}
+#error-bubble.hiding {
+    animation: bubbleDisappear 0.5s ease-out forwards;
+}
+@keyframes bubbleAppear {
+    from {
+        opacity: 0;
+        transform: translateX(20px) scale(0.9);
+    }
+    to {
+        opacity: 1;
+        transform: translateX(0) scale(1);
+    }
+}
+@keyframes bubbleDisappear {
+    from {
+        opacity: 1;
+        transform: translateX(0) scale(1);
+    }
+    to {
+        opacity: 0;
+        transform: translateX(20px) scale(0.9);
+    }
+}
+#error-bubble-content {
+    margin: 0;
+    font-size: 16px;
+}
+#error-bubble-content p {
+    margin: 12px 0;
+}
+#error-bubble-close {
+    position: absolute;
+    top: 12px;
+    right: 12px;
+    background: none;
+    border: none;
+    color: var(--error-text);
+    cursor: pointer;
+    font-size: 24px;
+}
+#error-bubble-close:hover {
+    color: #eee;
+}

example_chat_with_flow_and_agents.json

@@ -0,0 +1,223 @@
+{
+  "title": "Example Flow",
+  "data": {
+    "messages": [
+      {
+        "value": {
+          "role": "system",
+          "content": "You have the ability to present perspectives and provide real-time date and time information.\nYou can create and understand visuals, such as images, graphs, and charts, using SVG technology.\nUnless otherwise specified by the user, always use SVG for drawings.\nYou can express mathematical equations using latex notation, symbolized by $ and $$.\n\nStrictly adhere to user instructions, and in the event of conflicting directives, seek clarification or prioritize based on the user's needs.\nBe aware of the user's level of knowledge in the fields of programming and science to tailor your responses accordingly.\nIf you don't know the user's level of knowledge, assume a very high level of knowledge.\n\nBefore responding, thoroughly analyze the user's problem, considering the most efficient strategy to tackle and solve it step by step.\nIf you encounter an issue you can't solve or an error in your processes, communicate this clearly to the user and seek further guidance.\n\nAlways apply thoughtful consideration in all tasks.\nYour responses are backed by your extensive knowledge in programming and science.\nBe clear in articulating any ambiguities to ensure effective communication.\n\nKnowledge cutoff: none\nCurrent date: 2025-08-16\nCurrent time: 01:01\n\n--- AGENT DEFINITION ---\nYou are a Software Tester.\n--- END AGENT DEFINITION ---\n\n\n--- MCP TOOLS ---\n### MCP Tools:\n\nYou use tools via tool calls to help you solve questions. Make sure to use the following format for them, including the <dma:tool_call> and </dma:tool_call> tags. Tool calls should follow the following XML-inspired format:\n<dma:tool_call name=\"example_tool_name\">\n<parameter name=\"example_arg_name1\">\nexample_arg_value1\n</parameter>\n<parameter name=\"example_arg_name2\">\nexample_arg_value2\n</parameter>\n</dma:tool_call>\nDo not escape any of the tool call arguments. The arguments will be parsed as normal text. There is one exception: If you need to write </dma:tool_call> or </parameter> as value inside a <parameter>, write it like </dma:tool_call> or </parameter>.\n\nYou can use multiple tools in parallel by calling them together.\n\n#### Available Tools:\n\n1. **Datetime Get Current Datetime**\n - **Description**: Get the current date and time in ISO format.\n - **Action** (dma:tool_call name): `datetime_get_current_datetime`\n - **Arguments** (parameter name): \n\n2. **Fetch Fetch Web Page**\n - **Description**: Fetch the content of a web page given its URL. Supports HTTP and HTTPS, ignoring invalid SSL certificates.\n - **Action** (dma:tool_call name): `fetch_fetch_web_page`\n - **Arguments** (parameter name): \n   - `url`: Url (type: string)(required)\n\n--- END MCP TOOLS ---"
+        },
+        "metadata": null,
+        "answerAlternatives": {
+          "messages": [
+            {
+              "value": {
+                "role": "user",
+                "content": "Summarize the idea behind the chosen version and what the architecure is and then fully repeat the code of the chosen version."
+              },
+              "metadata": null,
+              "answerAlternatives": {
+                "messages": [
+                  {
+                    "value": {
+                      "role": "assistant",
+                      "content": "**Summary of Idea and Architecture:**\n\nThe game is a simple number guessing challenge where the computer selects a random integer between 1 and 100, and the player attempts to guess it. After each guess, the player receives feedback indicating whether their guess is too high, too low, or correct. The game continues until the correct number is guessed, at which point it displays the number of attempts made.\n\nThe **software architecture** is a **single-tier, procedural design** with no external dependencies. It uses a minimal structure: a main function that encapsulates the game loop, input handling, and logic. The state (target number, attempt count) is maintained in local variables. Input/output is handled via the console using `input()` and `print()`. Error handling for invalid input (non-integer entries) is included using a `try-except` block. The entire program is self-contained and executes sequentially in a single script.\n\n---\n\n**Chosen Version (with improved readability):**\n\n```python\nimport random\n\n\ndef guess_the_number():\n    \"\"\"Simple text-based 'Guess the Number' game.\"\"\"\n    target = random.randint(1, 100)\n    attempts = 7\n    guessed = False\n\n    print(\"I'm thinking of a number between 1 and 100. You have 7 attempts to guess it.\")\n\n    while attempts > 0 and not guessed:\n        try:\n            guess = int(input(f\"Enter your guess (attempts left: {attempts}): \"))\n            attempts -= 1\n\n            if guess == target:\n                print(f\"🎉 Congratulations! You guessed the number {target} correctly!\")\n                guessed = True\n            elif guess < target:\n                print(\"Too low! Try again.\")\n            else:\n                print(\"Too high! Try again.\")\n\n        except ValueError:\n            print(\"Please enter a valid integer.\")\n            attempts += 1  # No penalty for invalid input\n\n    if not guessed:\n        print(f\"❌ Game over! The number was {target}.\")\n\n\n# Run the game\nif __name__ == \"__main__\":\n    guess_the_number()\n```"
+                    },
+                    "metadata": {
+                      "model": "qwen/qwen3-30b-a3b-2507",
+                      "temperature": 0.5,
+                      "top_p": 1
+                    },
+                    "answerAlternatives": {
+                      "messages": [
+                        {
+                          "value": {
+                            "role": "user",
+                            "content": "Verify if the last version of the software is correct and report if something is not correct. Be concise.\n\nIf everything is correct, write only precisely that message: \"The code is correct\"."
+                          },
+                          "metadata": null,
+                          "answerAlternatives": {
+                            "messages": [
+                              {
+                                "value": {
+                                  "role": "assistant",
+                                  "content": "The code is correct"
+                                },
+                                "metadata": {
+                                  "model": "qwen/qwen3-30b-a3b-2507",
+                                  "temperature": 0.5,
+                                  "top_p": 1
+                                },
+                                "answerAlternatives": null
+                              }
+                            ],
+                            "activeMessageIndex": 0
+                          }
+                        }
+                      ],
+                      "activeMessageIndex": 0
+                    }
+                  }
+                ],
+                "activeMessageIndex": 0
+              }
+            }
+          ],
+          "activeMessageIndex": 0
+        }
+      }
+    ],
+    "activeMessageIndex": 0
+  },
+  "agents": [
+    {
+      "id": "agent-1755305965343",
+      "name": "developer",
+      "description": "Software Developer",
+      "systemPrompt": "You are a Software Developer.",
+      "availableAsTool": false,
+      "modelSettings": {},
+      "useCustomModelSettings": false
+    },
+    {
+      "id": "agent-1755306008385",
+      "name": "architect",
+      "description": "Software Architect",
+      "systemPrompt": "You are a Software Architect.",
+      "availableAsTool": false,
+      "modelSettings": {},
+      "useCustomModelSettings": false
+    },
+    {
+      "id": "agent-1755306043662",
+      "name": "tester",
+      "description": "Software Tester",
+      "systemPrompt": "You are a Software Tester.",
+      "availableAsTool": false,
+      "modelSettings": {},
+      "useCustomModelSettings": false
+    },
+    {
+      "id": "agent-1755306237948",
+      "name": "idea finder",
+      "description": "Idea Finder",
+      "systemPrompt": "You find new ideas.",
+      "availableAsTool": false,
+      "modelSettings": {},
+      "useCustomModelSettings": false
+    }
+  ],
+  "flow": {
+    "steps": [
+      {
+        "id": "step-1755394400913",
+        "type": "simple-prompt",
+        "x": 33,
+        "y": 18,
+        "agentId": "agent-1755306237948",
+        "prompt": "Describe a small game that can be implemented in python in one sentence."
+      },
+      {
+        "id": "step-1755394607361",
+        "type": "simple-prompt",
+        "x": 390,
+        "y": 24,
+        "agentId": "agent-1755306008385",
+        "prompt": "Write the software architecture description for it. Be concise."
+      },
+      {
+        "id": "step-1755394655147",
+        "type": "multi-prompt",
+        "x": 831,
+        "y": 26,
+        "agentId": "agent-1755305965343",
+        "prompt": "Write the code for the software.",
+        "count": 2
+      },
+      {
+        "id": "step-1755394914198",
+        "type": "simple-prompt",
+        "x": 35,
+        "y": 702,
+        "agentId": "agent-1755306043662",
+        "prompt": "Verify if the last version of the software is correct and report if something is not correct. Be concise.\n\nIf everything is correct, write only precisely that message: \"The code is correct\"."
+      },
+      {
+        "id": "step-1755394958642",
+        "type": "simple-prompt",
+        "x": 467,
+        "y": 849,
+        "agentId": "agent-1755305965343",
+        "prompt": "Improve the code. Keep textual remarks concise but concentrate on the code."
+      },
+      {
+        "id": "step-1755395049626",
+        "type": "conditional-stop",
+        "x": 65,
+        "y": 1110,
+        "conditionType": "contains",
+        "condition": "The code is correct",
+        "onMatch": "stop"
+      },
+      {
+        "id": "step-1755396588353",
+        "type": "prompt-and-clear",
+        "x": 248,
+        "y": 356,
+        "agentId": "agent-1755305965343",
+        "prompt": "Summarize the idea behind the chosen version and what the architecure is and then fully repeat the code of the chosen version."
+      },
+      {
+        "id": "step-1755396802906",
+        "type": "consolidator",
+        "x": 801,
+        "y": 445,
+        "agentId": "agent-1755305965343",
+        "prePrompt": "Please choose the best of the following answers:",
+        "postPrompt": "Explain your choice."
+      }
+    ],
+    "connections": [
+      {
+        "from": "step-1755394400913",
+        "to": "step-1755394607361",
+        "outputName": "default"
+      },
+      {
+        "from": "step-1755394607361",
+        "to": "step-1755394655147",
+        "outputName": "default"
+      },
+      {
+        "from": "step-1755394958642",
+        "to": "step-1755394914198",
+        "outputName": "default"
+      },
+      {
+        "from": "step-1755394914198",
+        "to": "step-1755395049626",
+        "outputName": "default"
+      },
+      {
+        "from": "step-1755395049626",
+        "to": "step-1755394958642",
+        "outputName": "default"
+      },
+      {
+        "from": "step-1755396588353",
+        "to": "step-1755394914198",
+        "outputName": "default"
+      },
+      {
+        "from": "step-1755396802906",
+        "to": "step-1755396588353",
+        "outputName": "default"
+      },
+      {
+        "from": "step-1755394655147",
+        "to": "step-1755396802906",
+        "outputName": "default"
+      }
+    ]
+  }
+}

index.html

@@ -1,19 +1,140 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <link rel="icon" href="penguin.svg" type="image/svg+xml" sizes="any">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AIFlow Chat</title>
+    <link rel="stylesheet" href="css/3rdparty/hljs_androidstudio.min.css">
+    <link rel="stylesheet" href="css/main.css">
+    <link rel="stylesheet" href="css/agents.css">
+</head>
+
+<body>
+    <div id="colContainer">
+        <h2 id="header">AIFlow Chat</h2>
+        <div id="mainContent" style="display: flex; flex: 1; overflow: hidden;">
+            <div id="chatListContainer">
+                <div id="chatListWrapper">
+                    <ul id="chatList"></ul>
+                </div>
+                <div id="chatControls">
+                    <div class="left-buttons">
+                        <button id="saveChatButton" title="Save current chat" class="toolButton">
+                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <path
+                                    d="M3 5a2 2 0 0 1 2-2h11.586A2 2 0 0 1 18 3.586l2.707 2.707A1 1 0 0 1 21 7v12a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5zm6 14h6v-6H9v6zm8 0h2V7.414l-2-2V7a2 2 0 0 1-2 2H9a2 2 0 0 1-2-2V5H5v14h2v-6a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v6zM9 5v2h6V5H9z"
+                                    fill="currentColor" />
+                            </svg>
+                        </button>
+                        <button id="loadChatButton" title="Load chat" class="toolButton">
+                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <path
+                                    d="m 1.9819243,7.2224558 a 2,2 0 0 1 2.0000001,-2 h 5 a 1,1 0 0 1 0.707,0.293 l 1.7069996,1.707 h 8.586 a 2,2 0 0 1 2,2.0000004 v 9.9999998 a 2,2 0 0 1 -2,2 H 3.9819244 a 2,2 0 0 1 -2.0000001,-2 z m 6.5860001,0 h -4.586 V 19.222456 H 19.981924 V 9.2224562 h -9 a 1,1 0 0 1 -0.707,-0.293 z"
+                                    fill="currentColor" />
+                                <path
+                                    d="M 2.3055156,7.2224558 3.0246072,4.7775442 c 0.3116724,-1.0596858 0.8954305,-2 2,-2 h 4.9999998 c 0.265195,5.67e-5 0.519507,0.1054506 0.707,0.293 l 1.707,1.707 7.579272,-0.1078637 c 1.104457,-0.015718 2.015556,0.89554 2,2 l -0.03596,2.5527757 h -2 l 0.03596,-2.5527757 -7.993272,0.1078637 c -0.265195,-5.66e-5 -0.519507,-0.1054506 -0.707,-0.293 l -1.7070048,-1.707 h -4.586 L 4.3055155,7.2224558 Z"
+                                    fill="currentColor" />
+                            </svg>
+                        </button>
+                    </div>
+                    <button id="newChatButton" title="New chat" class="toolButton">
+                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                            <path
+                                d="M12 4a1 1 0 0 1 1 1v6h6a1 1 0 1 1 0 2h-6v6a1 1 0 1 1-2 0v-6H5a1 1 0 1 1 0-2h6V5a1 1 0 0 1 1-1z" fill="currentColor"/>
+                        </svg>
+                    </button>
+                </div>
+            </div>
+            <div id="chatArea" style="flex: 1; display: flex; flex-direction: column; overflow: hidden;">
+                <div id="tabs">
+                    <div id="main-tabs">
+                        <button class="tab-button active" data-tab="chat">Chat</button>
+                    </div>
+                    <div id="tab-buttons">
+                        <a id="source" href="https://github.com/dmatscheko/aiflow-chat" target="_blank">github src</a>
+                        <button id="toggleChatList" title="Chats List" class="toolButton only-mobile">
+                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3 5h18a1 1 0 1 0 0-2H3a1 1 0 0 0 0 2zm18 4H3a1 1 0 1 0 0 2h18a1 1 0 1 0 0-2zm0 6H3a1 1 0 1 0 0 2h18a1 1 0 1 0 0-2z" fill="currentColor"/></svg>
+                        </button>
+                        <button id="settingsButton" title="Settings" class="toolButton">
+                            <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                                <path
+                                    d="M12 4a1 1 0 0 0-1 1c0 1.692-2.046 2.54-3.243 1.343a1 1 0 1 0-1.414 1.414C7.54 8.954 6.693 11 5 11a1 1 0 1 0 0 2c1.692 0 2.54 2.046 1.343 3.243a1 1 0 0 0 1.414 1.414C8.954 16.46 11 17.307 11 19a1 1 0 1 0 2 0c0-1.692 2.046-2.54 3.243-1.343a1 1 0 0 0 1.414-1.414C16.46 15.046 17.307 13 19 13a1 1 0 1 0 0-2c-1.692 0-2.54-2.046-1.343-3.243a1 1 0 0 0-1.414-1.414C15.046 7.54 13 6.693 13 5a1 1 0 0 0-1-1zm-2.992.777a3 3 0 0 1 5.984 0 3 3 0 0 1 4.23 4.231 3 3 0 0 1 .001 5.984 3 3 0 0 1-4.231 4.23 3 3 0 0 1-5.984 0 3 3 0 0 1-4.231-4.23 3 3 0 0 1 0-5.984 3 3 0 0 1 4.231-4.231z"
+                                    fill="currentColor" />
+                                <path
+                                    d="M12 10a2 2 0 1 0 0 4 2 2 0 0 0 0-4zm-2.828-.828a4 4 0 1 1 5.656 5.656 4 4 0 0 1-5.656-5.656z"
+                                    fill="currentColor" />
+                            </svg>
+                        </button>
+                    </div>
+                </div>
+                <div id="tab-content">
+                    <div class="tab-pane active" id="chat-tab-pane">
+                        <div id="chatContainer">
+                            <div id="chat"></div>
+                        </div>
+                        <div id="inputContainer">
+                            <textarea id="messageInput" autofocus
+                                placeholder="Enter multiline message and press &lt;shift&gt;+&lt;enter&gt;, or &lt;ctrl&gt;+&lt;enter&gt;, or click the triangle button."
+                                rows="3"></textarea>
+                            <button id="submitButton" title="Submit message / Stop assistant" class="toolButton">
+                                <svg width="24" height="24" viewBox="0 0 24 24" fill="none"
+                                    xmlns="http://www.w3.org/2000/svg">
+                                    <path
+                                        d="M6 6.741c0-1.544 1.674-2.505 3.008-1.728l9.015 5.26c1.323.771 1.323 2.683 0 3.455l-9.015 5.258C7.674 19.764 6 18.803 6 17.26V6.741zM17.015 12L8 6.741V17.26L17.015 12z"
+                                        fill="currentColor" />
+                                </svg>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div id="settings">
+        <div id="global-model-settings-container"></div>
+        <fieldset>
+            <legend>User role</legend>
+            <input type="radio" id="system" name="user_role" value="system">
+            <label for="system">System</label><br>
+            <input type="radio" id="user" name="user_role" value="user" checked>
+            <label for="user">User</label><br>
+            <input type="radio" id="assistant" name="user_role" value="assistant">
+            <label for="assistant">Assistant</label><br>
+            <input type="radio" id="tool" name="user_role" value="tool">
+            <label for="tool">Tool</label>
+        </fieldset>
+        <br>
+        <fieldset>
+            <legend>Connection</legend>
+            <label for="endpoint" style="margin-bottom: 4px; display: block;">API Endpoint</label>
+            <input type="text" id="endpoint" value="https://api.openai.com/v1/chat/completions">
+            <label for="apiKey" style="margin-bottom: 4px; display: block; margin-top: 12px;">API Key</label>
+            <input type="password" id="apiKey">
+            <div id="session-login">
+                <label for="login-btn">Login</label>
+                <button id="login-btn" title="Login" class="toolButton">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14 19a1 1 0 1 0 0 2h5a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2h-5a1 1 0 1 0 0 2h5v14h-5z" fill="currentColor"/><path d="M15.714 12.7a.996.996 0 0 0 .286-.697v-.006a.997.997 0 0 0-.293-.704l-4-4a1 1 0 1 0-1.414 1.414L12.586 11H3a1 1 0 1 0 0 2h9.586l-2.293 2.293a1 1 0 1 0 1.414 1.414l4-4 .007-.007z" fill="currentColor"/></svg>
+                </button>
+            </div>
+            <div id="session-logout">
+                <label for="logout-btn">Logout</label>
+                <button id="logout-btn" title="Logout" class="toolButton">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M11 20a1 1 0 0 0-1-1H5V5h5a1 1 0 1 0 0-2H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h5a1 1 0 0 0 1-1z" fill="currentColor"/><path d="M21.714 12.7a.996.996 0 0 0 .286-.697v-.006a.997.997 0 0 0-.293-.704l-4-4a1 1 0 1 0-1.414 1.414L18.586 11H9a1 1 0 1 0 0 2h9.586l-2.293 2.293a1 1 0 1 0 1.414 1.414l4-4 .007-.007z" fill="currentColor"/></svg>
+                </button>
+            </div>
+        </fieldset>
+    </div>
+    <div id="error-bubble">
+        <button id="error-bubble-close">×</button>
+        <div id="error-bubble-content"></div>
+    </div>
+    <script src="js/3rdparty/katex.min.js"></script>
+    <script src="js/3rdparty/auto-render.min.js"></script>
+    <script src="js/3rdparty/markdown-it.min.js"></script>
+    <script src="js/3rdparty/highlight.min.js"></script>
+    <script type="module" src="js/main.js"></script>
+</body>
+
+</html>

js/3rdparty/auto-render.min.js

@@ -0,0 +1 @@
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("katex")):"function"==typeof define&&define.amd?define(["katex"],t):"object"==typeof exports?exports.renderMathInElement=t(require("katex")):e.renderMathInElement=t(e.katex)}("undefined"!=typeof self?self:this,(function(e){return function(){"use strict";var t={771:function(t){t.exports=e}},r={};function n(e){var i=r[e];if(void 0!==i)return i.exports;var a=r[e]={exports:{}};return t[e](a,a.exports,n),a.exports}n.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return n.d(t,{a:t}),t},n.d=function(e,t){for(var r in t)n.o(t,r)&&!n.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},n.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)};var i={};return function(){n.d(i,{default:function(){return s}});var e=n(771),t=n.n(e),r=function(e,t,r){for(var n=r,i=0,a=e.length;n<t.length;){var o=t[n];if(i<=0&&t.slice(n,n+a)===e)return n;"\\"===o?n++:"{"===o?i++:"}"===o&&i--,n++}return-1},a=/^\\begin{/,o=function(e,t){for(var n,i=[],o=new RegExp("("+t.map((function(e){return e.left.replace(/[-/\\^$*+?.()|[\]{}]/g,"\\$&")})).join("|")+")");-1!==(n=e.search(o));){n>0&&(i.push({type:"text",data:e.slice(0,n)}),e=e.slice(n));var l=t.findIndex((function(t){return e.startsWith(t.left)}));if(-1===(n=r(t[l].right,e,t[l].left.length)))break;var d=e.slice(0,n+t[l].right.length),s=a.test(d)?d:e.slice(t[l].left.length,n);i.push({type:"math",data:s,rawData:d,display:t[l].display}),e=e.slice(n+t[l].right.length)}return""!==e&&i.push({type:"text",data:e}),i},l=function(e,r){var n=o(e,r.delimiters);if(1===n.length&&"text"===n[0].type)return null;for(var i=document.createDocumentFragment(),a=0;a<n.length;a++)if("text"===n[a].type)i.appendChild(document.createTextNode(n[a].data));else{var l=document.createElement("span"),d=n[a].data;r.displayMode=n[a].display;try{r.preProcess&&(d=r.preProcess(d)),t().render(d,l,r)}catch(e){if(!(e instanceof t().ParseError))throw e;r.errorCallback("KaTeX auto-render: Failed to parse `"+n[a].data+"` with ",e),i.appendChild(document.createTextNode(n[a].rawData));continue}i.appendChild(l)}return i},d=function e(t,r){for(var n=0;n<t.childNodes.length;n++){var i=t.childNodes[n];if(3===i.nodeType){for(var a=i.textContent,o=i.nextSibling,d=0;o&&o.nodeType===Node.TEXT_NODE;)a+=o.textContent,o=o.nextSibling,d++;var s=l(a,r);if(s){for(var f=0;f<d;f++)i.nextSibling.remove();n+=s.childNodes.length-1,t.replaceChild(s,i)}else n+=d}else 1===i.nodeType&&function(){var t=" "+i.className+" ";-1===r.ignoredTags.indexOf(i.nodeName.toLowerCase())&&r.ignoredClasses.every((function(e){return-1===t.indexOf(" "+e+" ")}))&&e(i,r)}()}},s=function(e,t){if(!e)throw new Error("No element provided to render");var r={};for(var n in t)t.hasOwnProperty(n)&&(r[n]=t[n]);r.delimiters=r.delimiters||[{left:"$$",right:"$$",display:!0},{left:"\\(",right:"\\)",display:!1},{left:"\\begin{equation}",right:"\\end{equation}",display:!0},{left:"\\begin{align}",right:"\\end{align}",display:!0},{left:"\\begin{alignat}",right:"\\end{alignat}",display:!0},{left:"\\begin{gather}",right:"\\end{gather}",display:!0},{left:"\\begin{CD}",right:"\\end{CD}",display:!0},{left:"\\[",right:"\\]",display:!0}],r.ignoredTags=r.ignoredTags||["script","noscript","style","textarea","pre","code","option"],r.ignoredClasses=r.ignoredClasses||[],r.errorCallback=r.errorCallback||console.error,r.macros=r.macros||{},d(e,r)}}(),i=i.default}()}));

js/app.js

@@ -0,0 +1,500 @@
+/**
+ * @fileoverview Main application class.
+ */
+
+'use strict';
+
+import Store from './state/store.js';
+import ApiService from './services/api-service.js';
+import ChatService from './services/chat-service.js';
+import ConfigService from './services/config-service.js';
+import SettingsPanel from './components/settings-panel.js';
+import { ChatBox } from './components/chatbox.js';
+import ChatListView from './components/chatlist-view.js';
+import { log, triggerError } from './utils/logger.js';
+import { resetEditing } from './utils/chat.js';
+import { showLogin, showLogout } from './utils/ui.js';
+import { exportJson, importJson } from './utils/shared.js';
+import { hooks, registerPlugin } from './hooks.js';
+import { formattingPlugins } from './plugins/formatting.js';
+import { alternativeNavigationPlugin, messageModificationPlugin } from './plugins/ui-controls.js';
+import { avatarsPlugin } from './plugins/avatars.js';
+import { mcpPlugin } from './plugins/mcp.js';
+import { errorBubblePlugin } from './plugins/error-bubble.js';
+import { agentsPlugin } from './plugins/agents.js';
+import { modelParamsPlugin } from './plugins/model-params.js';
+import { maximizePlugin } from './plugins/maximize-view.js';
+import { startMessage, messageSubmit, messageStop, defaultEndpoint } from './config.js';
+
+/**
+ * @class App
+ * Main application orchestrator.
+ */
+class App {
+    constructor() {
+        log(5, 'App: Constructor called');
+        this.ui = {
+            chatBox: null,
+            messageEl: document.getElementById('messageInput'),
+            submitButton: document.getElementById('submitButton'),
+            newChatButton: document.getElementById('newChatButton'),
+            saveChatButton: document.getElementById('saveChatButton'),
+            loadChatButton: document.getElementById('loadChatButton'),
+        };
+        this.store = new Store({
+            receiving: false,
+            regenerateLastAnswer: false,
+            controller: new AbortController(),
+            editingPos: null,
+            chats: [],
+            currentChat: null,
+            ui: this.ui,
+        });
+
+        this.configService = new ConfigService(this.store);
+        this.apiService = new ApiService(this.store);
+        this.chatService = new ChatService(this.store, this.configService);
+
+        this.settingsPanel = new SettingsPanel({
+            configService: this.configService,
+            app: this,
+        });
+
+        this.chatListView = new ChatListView({
+            onChatSelected: (chatId) => this.chatService.switchChat(chatId),
+            onChatDeleted: (chatId) => this.chatService.deleteChat(chatId),
+            onTitleEdited: (chatId, newTitle) => this.chatService.updateChatTitle(chatId, newTitle),
+        });
+
+        this.ui.chatBox = new ChatBox(this.store);
+
+        this.store.subscribe('receiving', (val) => {
+            this.ui.submitButton.innerHTML = val ? messageStop : messageSubmit;
+        });
+        this.store.subscribe('chats', (chats) => this.chatListView.render(chats, this.store.get('currentChat')));
+        this.store.subscribe('currentChat', (chat) => {
+            this.onChatSwitched(chat);
+            this.chatListView.render(this.store.get('chats'), chat);
+        });
+
+        if (window.innerWidth <= 1037) {
+            document.getElementById('chatListContainer').classList.add('hidden');
+        }
+        hooks.onGenerateAIResponse.push((options, chatlog) => this.generateAIResponse(options, chatlog));
+    }
+
+    /**
+     * Initializes the application.
+     */
+    async init() {
+        log(3, 'App: init called');
+        this.registerPlugins();
+        this.setupGlobalErrorHandlers();
+
+        this.ui.chatBox.onUpdate = () => this.chatService.persistChats();
+
+        this.chatService.init();
+
+        this.settingsPanel.setApiKey(this.configService.getItem('apiKey', ''));
+        this.settingsPanel.setEndpoint(this.configService.getItem('endpoint', defaultEndpoint));
+
+        await this.handleLogin();
+
+        hooks.onSettingsRender.forEach(fn => fn(this.settingsPanel.ui.settingsEl));
+
+        this.setUpEventListeners();
+    }
+
+    /**
+     * Registers all the plugins.
+     */
+    registerPlugins() {
+        registerPlugin(agentsPlugin, this);
+        registerPlugin(mcpPlugin, this);
+        formattingPlugins.forEach(plugin => registerPlugin(plugin, this));
+        registerPlugin(alternativeNavigationPlugin, this);
+        registerPlugin(messageModificationPlugin, this);
+        registerPlugin(avatarsPlugin, this);
+        registerPlugin(errorBubblePlugin, this);
+        registerPlugin(modelParamsPlugin, this);
+        registerPlugin(maximizePlugin, this);
+    }
+
+    /**
+     * Sets up global error handlers.
+     */
+    setupGlobalErrorHandlers() {
+        window.addEventListener('error', (event) => {
+            log(1, 'Global error', event.error || event.message);
+            triggerError(event.error || new Error(event.message));
+            event.preventDefault();
+        });
+        window.addEventListener('unhandledrejection', (event) => {
+            log(1, 'Global unhandled rejection', event.reason);
+            triggerError(event.reason);
+            event.preventDefault();
+        });
+    }
+
+    /**
+     * Handles the login process.
+     */
+    async handleLogin() {
+        let success = this.configService.getItem('endpoint', '') !== '';
+        if (success) {
+            success = await this.loadModels();
+            if (success) {
+                success = this.configService.getItem('model', '') !== '';
+                if (success) {
+                    showLogout();
+                    this.settingsPanel.toggle('close');
+                } else {
+                    triggerError('Please select a model.');
+                    showLogout();
+                    this.settingsPanel.toggle('open');
+                }
+            } else {
+                triggerError('Models could not be loaded. Is the API endpoint correct?');
+                showLogin();
+                this.settingsPanel.toggle('open');
+            }
+        } else {
+            triggerError('Please log in.');
+            showLogin();
+            // Pass empty array to clear models if login fails
+            this.configService.setItem('models', '[]');
+            this.settingsPanel.toggle('open');
+        }
+    }
+
+    /**
+     * Handles chat switching.
+     * @param {Object} chat - The chat to switch to.
+     */
+    onChatSwitched(chat) {
+        log(3, 'App: onChatSwitched called for chat', chat?.id);
+        this.ui.chatBox.setChatlog(chat?.chatlog || null);
+        if (window.innerWidth <= 1037) {
+            document.getElementById('chatListContainer').classList.add('hidden');
+        }
+    }
+
+    /**
+     * Fetches models from the API.
+     * @returns {Promise<boolean>} True if models were loaded successfully.
+     */
+    async loadModels() {
+        log(3, 'App: loadModels called');
+        const endpoint = this.configService.getItem('endpoint', defaultEndpoint);
+        const apiKey = this.configService.getItem('apiKey', '');
+        if (!endpoint) {
+            return false;
+        }
+        try {
+            const models = await this.apiService.getModels(endpoint, apiKey);
+            this.configService.setItem('models', JSON.stringify(models));
+
+            if (models && models.length > 0) {
+                const currentModel = this.configService.getItem('model');
+                if (currentModel) {
+                    if (!models.some(model => model.id === currentModel)) {
+                        this.configService.removeItem('model');
+                    }
+                }
+            } else {
+                this.configService.removeItem('model');
+                triggerError('API endpoint does not provide any AI models. Please configure AI models there.');
+            }
+
+            // The settings panel will now re-render with the new models
+            // when it is opened. We could trigger a re-render here if needed.
+            return true;
+        } catch (err) {
+            log(1, 'App: Failed to load models', err);
+            triggerError('Failed to load models:', err);
+            if (this.configService.getItem('apiKey') !== null) {
+                this.configService.removeItem('apiKey');
+                this.configService.removeItem('models');
+                showLogin();
+                triggerError('Session invalid, logged out.');
+            }
+            return false;
+        }
+    }
+
+    /**
+     * Sets up the main event listeners.
+     */
+    setUpEventListeners() {
+        log(3, 'App: setUpEventListeners called');
+        this.ui.submitButton.addEventListener('click', () => {
+            log(4, 'App: Submit button clicked, receiving:', this.store.get('receiving'));
+            if (this.store.get('receiving')) {
+                this.store.get('controller').abort();
+                return;
+            }
+            this.submitUserMessage(this.ui.messageEl.value, document.querySelector('input[name="user_role"]:checked').value);
+            document.getElementById('user').checked = true;
+            this.ui.messageEl.value = '';
+            this.ui.messageEl.style.height = 'auto';
+        });
+        this.ui.messageEl.addEventListener('keydown', event => {
+            if (event.key === 'Enter' && (event.shiftKey || event.ctrlKey || event.altKey)) {
+                event.preventDefault();
+                this.ui.submitButton.click();
+            }
+        });
+        this.ui.messageEl.addEventListener('input', function () {
+            this.style.height = 'auto';
+            let height = this.scrollHeight - parseInt(getComputedStyle(this).paddingTop) - parseInt(getComputedStyle(this).paddingBottom);
+            if (height > window.innerHeight / 2) {
+                height = window.innerHeight / 2;
+                this.style.overflowY = 'scroll';
+            } else {
+                this.style.overflowY = 'hidden';
+            }
+            if (height > this.clientHeight) this.style.height = `${height}px`;
+        });
+        document.addEventListener('keydown', event => {
+            if (event.key === 'Escape') {
+                this.store.get('controller').abort();
+                resetEditing(this.store, this.ui.chatBox.chatlog, this.ui.chatBox);
+            }
+        });
+        this.ui.newChatButton.addEventListener('click', () => {
+            log(4, 'App: New chat button clicked');
+            if (this.store.get('receiving')) this.store.get('controller').abort();
+            this.ui.messageEl.value = startMessage;
+            this.ui.messageEl.style.height = 'auto';
+            this.chatService.createNewChat();
+        });
+        this.ui.saveChatButton.addEventListener('click', () => {
+            log(4, 'App: Save chat button clicked');
+            const current = this.store.get('currentChat');
+            if (!current) return;
+
+            const chatData = {
+                title: current.title,
+                data: current.chatlog.toJSON(),
+                agents: current.agents || [],
+                flow: current.flow || { steps: [], connections: [] }
+            };
+            const filenameBase = current.title.replace(/\s/g, '_');
+            exportJson(chatData, filenameBase);
+        });
+        this.ui.loadChatButton.addEventListener('click', () => {
+            log(4, 'App: Load chat button clicked');
+            importJson('application/json', (jsonContent) => {
+                this.chatService.importChat(JSON.stringify(jsonContent));
+            });
+        });
+
+        document.getElementById('toggleChatList').addEventListener('click', () => {
+            log(5, 'App: Toggle chat list clicked');
+            document.getElementById('chatListContainer').classList.toggle('hidden');
+        });
+    }
+
+    /**
+     * Generates an AI response.
+     * @param {Object} [options={}] - Options for the generation.
+     * @param {Chatlog} [targetChatlog=this.chatlog] - The chatlog to generate a response for.
+     */
+    async generateAIResponse(options = {}, targetChatlog = this.ui.chatBox.chatlog) {
+        log(3, 'App: generateAIResponse called');
+        if (this.store.get('receiving')) return;
+
+        // 1. Get settings from all scopes
+        const globalSettings = this.configService.getModelSettings();
+        const currentChat = this.store.get('currentChat');
+        const chatSettings = currentChat?.modelSettings || {};
+
+        let agentSettings = {};
+        const activeAgentId = currentChat?.activeAgentId;
+        if (activeAgentId) {
+            const agent = currentChat.agents.find(a => a.id === activeAgentId);
+            if (agent && agent.useCustomModelSettings) {
+                agentSettings = agent.modelSettings || {};
+            }
+        }
+
+        // 2. Merge settings (agent > chat > global > options)
+        const mergedSettings = { ...globalSettings, ...chatSettings, ...agentSettings, ...options };
+
+        if (!mergedSettings.model) {
+            log(2, 'App: No model selected');
+            triggerError('Please select a model.');
+            return;
+        }
+
+        this.store.set('receiving', true);
+        const targetMessage = targetChatlog.getLastMessage();
+        try {
+            let payload = {
+                messages: targetChatlog.getActiveMessageValues().filter(m => m.content !== null),
+                stream: true
+            };
+
+            // 3. Apply settings to payload via hook
+            hooks.onModelSettings.forEach(fn => fn(payload, mergedSettings));
+
+            // Don't send a request if there are no messages or only a system prompt.
+            if (payload.messages.length === 0) return;
+            if (payload.messages.length === 1 && payload.messages[0]?.role === 'system') return;
+
+            if (payload.messages[0]?.role === 'system') {
+                let systemContent = payload.messages[0].content;
+                for (let fn of hooks.onModifySystemPrompt) {
+                    systemContent = fn(systemContent) || systemContent;
+                }
+                payload.messages[0].content = systemContent;
+            }
+            payload = hooks.beforeApiCall.reduce((p, fn) => fn(p, this.ui.chatBox) || p, payload);
+
+            const endpoint = this.configService.getItem('endpoint', defaultEndpoint)
+            const apiKey = this.configService.getItem('apiKey', '');
+            const abortSignal = this.store.get('controller').signal;
+            const reader = await this.apiService.streamAPIResponse(payload, endpoint, apiKey, abortSignal);
+
+            while (true) {
+                const { done, value } = await reader.read();
+                if (done) break;
+                const valueStr = new TextDecoder().decode(value);
+                if (valueStr.startsWith('{')) {
+                    const data = JSON.parse(valueStr);
+                    if (data.error) throw new Error(data.error.message);
+                }
+                const chunks = valueStr.split('\n');
+                let delta = '';
+                chunks.forEach(chunk => {
+                    if (!chunk.startsWith('data: ')) return;
+                    chunk = chunk.substring(6);
+                    if (chunk === '' || chunk === '[DONE]') return;
+                    const data = JSON.parse(chunk);
+                    if (data.error) throw new Error(data.error.message);
+                    delta += data.choices[0].delta.content || '';
+                });
+                if (delta === '') continue;
+                log(5, 'App: Received chunk', delta);
+                hooks.onChunkReceived.forEach(fn => fn(delta));
+                targetMessage.appendContent(delta);
+                targetChatlog.notify();
+            }
+        } catch (error) {
+            this.store.set('receiving', false); // Ensure receiving is false on error
+            if (error.name === 'AbortError') {
+                log(3, 'App: Response aborted');
+                hooks.onCancel.forEach(fn => fn());
+                this.store.set('controller', new AbortController());
+                const lastMessage = targetChatlog.getLastMessage();
+                if (lastMessage && lastMessage.value === null) {
+                    const lastAlternatives = targetChatlog.getLastAlternatives();
+                    lastAlternatives.messages.pop();
+                    lastAlternatives.activeMessageIndex = lastAlternatives.messages.length - 1;
+                    targetChatlog.notify();
+                } else if (lastMessage) {
+                    lastMessage.appendContent('\n\n[Response aborted by user]');
+                    lastMessage.cache = null;
+                }
+                return;
+            }
+            log(1, 'App: generateAIResponse error', error);
+            triggerError(error.message);
+            const lastMessage = targetChatlog.getLastMessage();
+            if (lastMessage.value === null) {
+                lastMessage.value = { role: 'assistant', content: `[Error: ${error.message}. Retry or check connection.]` };
+                hooks.afterMessageAdd.forEach(fn => fn(lastMessage));
+            } else {
+                lastMessage.appendContent(`\n\n[Error: ${error.message}. Retry or check connection.]`);
+            }
+            lastMessage.cache = null;
+        } finally {
+            // Set receiving to false before calling hooks, in case a hook triggers another generation
+            this.store.set('receiving', false);
+            const lastMessage = targetChatlog.getLastMessage();
+
+            // Set metadata here so hooks can use it
+            if (lastMessage && lastMessage.value !== null) {
+                lastMessage.cache = null;
+                lastMessage.metadata = { model: mergedSettings.model, temperature: mergedSettings.temperature, top_p: mergedSettings.top_p };
+                hooks.onMessageComplete.forEach(fn => fn(lastMessage, targetChatlog, this.ui.chatBox));
+            }
+            targetChatlog.notify();
+            this.chatService.persistChats();
+        }
+    }
+
+    /**
+     * Submits a user message.
+     * @param {string} message - The message to submit.
+     * @param {string} userRole - The role of the user.
+     */
+    async submitUserMessage(message, userRole) {
+        log(3, 'App: submitUserMessage called with role', userRole);
+        // Ensure we are acting on the chatlog instance currently displayed in the UI
+        const currentChatlog = this.ui.chatBox.chatlog;
+        if (!currentChatlog) return;
+
+        const editedPos = this.store.get('editingPos');
+        log(4, 'App: editingPos is', editedPos);
+        if (editedPos !== null) {
+            log(4, 'App: Editing message at pos', editedPos);
+            const msg = currentChatlog.getNthMessage(editedPos);
+            if (msg) {
+                msg.value.role = userRole;
+                msg.setContent(message.trim());
+                msg.cache = null;
+                this.ui.chatBox.update();
+            }
+            this.store.set('editingPos', null);
+            document.getElementById('user').checked = true;
+            const editedMsg = currentChatlog.getNthMessage(editedPos);
+            if (editedMsg.value.role !== 'assistant' && editedMsg.answerAlternatives === null && currentChatlog.getFirstMessage() !== editedMsg) {
+                currentChatlog.addMessage({ role: 'assistant', content: null });
+                this.ui.chatBox.update();
+                await this.generateAIResponse({}, currentChatlog);
+            }
+            return;
+        }
+
+        if (!this.store.get('regenerateLastAnswer') && !message) return;
+        // Allow flow to submit messages even if another response is being generated
+        if (this.store.get('receiving') && !agentsPlugin.flowRunning) return;
+
+        if (userRole === 'assistant') {
+            let modifiedContent = message;
+            for (let fn of hooks.beforeUserMessageAdd) {
+                const result = fn(modifiedContent, userRole);
+                if (result === false) return;
+                if (typeof result === 'string') modifiedContent = result;
+            }
+            const newMessage = currentChatlog.addMessage({ role: userRole, content: modifiedContent });
+            hooks.afterMessageAdd.forEach(fn => fn(newMessage));
+            this.ui.chatBox.update();
+            return;
+        }
+
+        if (!this.store.get('regenerateLastAnswer')) {
+            message = message.trim();
+            let modifiedContent = message;
+            for (let fn of hooks.beforeUserMessageAdd) {
+                const result = fn(modifiedContent, userRole);
+                if (result === false) return;
+                if (typeof result === 'string') modifiedContent = result;
+            }
+            const newMessage = currentChatlog.addMessage({ role: userRole, content: modifiedContent });
+            hooks.afterMessageAdd.forEach(fn => fn(newMessage));
+            currentChatlog.addMessage(null);
+        }
+
+        this.store.set('regenerateLastAnswer', false);
+        this.ui.chatBox.update(); // Initial update to show user message
+
+        await this.generateAIResponse({}, currentChatlog);
+
+        // Final update to ensure UI is consistent after response generation, especially for flows.
+        this.ui.chatBox.update();
+    }
+}
+
+export default App;

js/components/chatbox.js

@@ -0,0 +1,185 @@
+/**
+ * @fileoverview The ChatBox component is responsible for displaying chat messages.
+ */
+
+'use strict';
+
+import { log } from '../utils/logger.js';
+import { hooks } from '../hooks.js';
+import { triggerError } from '../utils/logger.js';
+
+/**
+ * @class ChatBox
+ * Responsible for displaying the chat messages in the UI.
+ */
+class ChatBox {
+    /**
+     * @param {import('../state/store.js').default} store - The application's state store.
+     */
+    constructor(store) {
+        log(5, 'ChatBox: Constructor called');
+        this.store = store;
+        this.container = document.getElementById('chat');
+        this.chatlog = null;
+        this.onUpdate = null; // Callback for after updates.
+        this.boundUpdate = this.update.bind(this);
+    }
+
+    /**
+     * Sets the chatlog for the chatbox to display.
+     * @param {import('./chatlog.js').Chatlog} chatlog - The chatlog to display.
+     */
+    setChatlog(chatlog) {
+        if (this.chatlog) {
+            this.chatlog.unsubscribe(this.boundUpdate);
+        }
+        this.chatlog = chatlog;
+        if (this.chatlog) {
+            this.chatlog.subscribe(this.boundUpdate);
+        }
+        this.update();
+    }
+
+    /**
+     * Updates the HTML content of the chat window.
+     * @param {boolean} [scroll=true] - Whether to scroll to the bottom.
+     */
+    update(scroll = true) {
+        log(5, 'ChatBox: update called, scroll:', scroll);
+        if (!this.chatlog) {
+            this.container.innerHTML = '';
+            return;
+        }
+
+        const shouldScrollDown = scroll && this.#isScrolledToBottom();
+        const fragment = document.createDocumentFragment();
+        let alternative = this.chatlog.rootAlternatives;
+        let lastRole = 'assistant';
+        let pos = 0;
+        // Traverse the active path through the chatlog.
+        while (alternative) {
+            const message = alternative.getActiveMessage();
+            if (!message) break;
+            if (message.cache) {
+                fragment.appendChild(message.cache); // Use cached element if available.
+                lastRole = message.value.role;
+                alternative = message.answerAlternatives;
+                pos++;
+                continue;
+            }
+            const msgIdx = alternative.activeMessageIndex;
+            const msgCnt = alternative.messages.length;
+            if (!message.value) {
+                const role = lastRole === 'assistant' ? 'user' : 'assistant';
+                const messageEl = this.formatMessage({ value: { role, content: '🤔...' } }, pos, msgIdx, msgCnt);
+                fragment.appendChild(messageEl);
+                break;
+            }
+            if (message.value.content === null) {
+                const messageEl = this.formatMessage({ value: { role: message.value.role, content: '🤔...' } }, pos, msgIdx, msgCnt);
+                fragment.appendChild(messageEl);
+                break;
+            }
+            const messageEl = this.formatMessage(message, pos, msgIdx, msgCnt);
+            fragment.appendChild(messageEl);
+            message.cache = messageEl; // Cache the element.
+            lastRole = message.value.role;
+            alternative = message.answerAlternatives;
+            pos++;
+        }
+        this.container.replaceChildren(fragment);
+        if (shouldScrollDown) {
+            this.container.parentElement.scrollTop = this.container.parentElement.scrollHeight;
+        }
+        if (this.onUpdate) this.onUpdate();
+    }
+
+    /**
+     * Checks if the chat container is scrolled to the bottom.
+     * @returns {boolean} True if scrolled to the bottom.
+     * @private
+     */
+    #isScrolledToBottom() {
+        log(5, 'ChatBox: #isScrolledToBottom called');
+        const { scrollHeight, clientHeight, scrollTop } = this.container.parentElement;
+        return scrollHeight - clientHeight <= scrollTop + 5;
+    }
+
+    /**
+     * Formats a single message as an HTML element.
+     * @param {import('./chatlog.js').Message} message - The message to format.
+     * @param {number} pos - The position of the message in the chat.
+     * @param {number} msgIdx - The index of the message in its alternatives.
+     * @param {number} msgCnt - The total number of alternatives.
+     * @returns {HTMLElement} The formatted message element.
+     */
+    formatMessage(message, pos, msgIdx, msgCnt) {
+        log(5, 'ChatBox: formatMessage called for pos', pos);
+        const el = document.createElement('div');
+        el.classList.add('message', message.value.role === 'assistant' ? 'pong' : 'ping');
+        if (message.value.role === 'system') el.classList.add('system');
+        el.dataset.pos = pos;
+
+        // Create header
+        const msgTitleStrip = document.createElement('small');
+        const roleEl = document.createElement('b');
+        roleEl.textContent = message.value.role;
+        msgTitleStrip.appendChild(roleEl);
+
+        if (message.metadata?.model) {
+            const modelEl = document.createElement('span');
+            modelEl.classList.add('right');
+            modelEl.textContent = ` ${message.metadata.model}         `;
+            msgTitleStrip.appendChild(modelEl);
+        }
+
+        // Create a container for controls and call the hook
+        const controlsContainer = document.createElement('span');
+        controlsContainer.classList.add('message-controls', 'nobreak');
+        hooks.onRenderMessageControls.forEach(fn => fn(controlsContainer, message, this.chatlog, this));
+        msgTitleStrip.appendChild(controlsContainer);
+
+        el.appendChild(msgTitleStrip);
+        el.appendChild(document.createElement('br'));
+        el.appendChild(document.createElement('br'));
+
+        const formattedContent = this.#formatContent(message.value.content, message, pos);
+        if (formattedContent) {
+            el.appendChild(formattedContent);
+        }
+
+        hooks.onRenderMessage.forEach(fn => fn(el, message, this));
+        return el;
+    }
+
+    /**
+     * Formats the content of a message.
+     * @param {string} text - The text content to format.
+     * @param {import('./chatlog.js').Message} message - The message being formatted.
+     * @returns {HTMLElement | null} The formatted content element or null.
+     * @private
+     */
+    #formatContent(text, message, pos) {
+        log(5, 'ChatBox: #formatContent called');
+        if (!text) return null;
+        try {
+            text = text.trim();
+            let html = text;
+            hooks.onFormatContent.forEach(fn => { html = fn(html, pos); });
+            const wrapper = document.createElement('div');
+            wrapper.classList.add('content');
+            wrapper.innerHTML = html;
+            hooks.onPostFormatContent.forEach(fn => { fn(wrapper, message, pos); });
+            return wrapper;
+        } catch (error) {
+            log(1, 'ChatBox: Formatting error', error);
+            triggerError('Formatting error:', error);
+            const wrapper = document.createElement('div');
+            wrapper.classList.add('content');
+            wrapper.innerHTML = `<p>Error formatting content: ${error.message}</p><pre>${text}</pre>`;
+            return wrapper;
+        }
+    }
+}
+
+export { ChatBox };

js/components/chatlist-view.js

@@ -0,0 +1,110 @@
+/**
+ * @fileoverview The ChatListView component displays the list of chats.
+ */
+
+'use strict';
+
+import { log } from '../utils/logger.js';
+import { createControlButton } from '../utils/ui.js';
+
+/**
+ * @class ChatListView
+ * Manages the chat list UI.
+ */
+class ChatListView {
+    /**
+     * @param {Object} options - The options for the chat list view.
+     * @param {Function} options.onChatSelected - Callback for when a chat is selected.
+     * @param {Function} options.onChatDeleted - Callback for when a chat is deleted.
+     * @param {Function} options.onTitleEdited - Callback for when a chat title is edited.
+     */
+    constructor({ onChatSelected, onChatDeleted, onTitleEdited }) {
+        this.onChatSelected = onChatSelected;
+        this.onChatDeleted = onChatDeleted;
+        this.onTitleEdited = onTitleEdited;
+
+        this.ui = {
+            chatList: document.getElementById('chatList'),
+        };
+    }
+
+    /**
+     * Renders the chat list.
+     * @param {Array<Object>} chats - The list of chats to render.
+     * @param {Object} currentChat - The currently active chat.
+     */
+    render(chats, currentChat) {
+        log(3, 'ChatListView: render called');
+        this.ui.chatList.innerHTML = '';
+        chats.forEach(chat => {
+            const li = document.createElement('li');
+            li.dataset.id = chat.id;
+            li.classList.add('chat-item');
+            li.classList.toggle('active', chat.id === currentChat?.id);
+
+            const titleEl = document.createElement('span');
+            titleEl.textContent = chat.title;
+            titleEl.addEventListener('click', () => this.onChatSelected(chat.id));
+
+            const editButton = createControlButton(
+                'Edit Title',
+                '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" fill="currentColor"/></svg>',
+                () => this.editTitle(li, titleEl, chat)
+            );
+
+            const deleteButton = createControlButton(
+                'Delete Chat',
+                '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7 4a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v2h4a1 1 0 1 1 0 2h-1.069l-.867 12.142A2 2 0 0 1 17.069 22H6.93a2 2 0 0 1-1.995-1.858L4.07 8H3a1 1 0 0 1 0-2h4V4zm2 2h6V4H9v2zM6.074 8l.857 12H17.07l.857-12H6.074zM10 10a1 1 0 0 1 1 1v6a1 1 0 1 1-2 0v-6a1 1 0 0 1 1-1zm4 0a1 1 0 0 1 1 1v6a1 1 0 1 1-2 0v-6a1 1 0 0 1 1-1z" fill="currentColor"/></svg>',
+                () => this.onChatDeleted(chat.id)
+            );
+
+            li.appendChild(titleEl);
+            li.appendChild(editButton);
+            li.appendChild(deleteButton);
+            this.ui.chatList.appendChild(li);
+        });
+    }
+
+    /**
+     * Handles the editing of a chat title.
+     * @param {HTMLElement} li - The list item element.
+     * @param {HTMLElement} titleEl - The title element.
+     * @param {Object} chat - The chat object.
+     */
+    editTitle(li, titleEl, chat) {
+        const input = document.createElement('input');
+        input.type = 'text';
+        input.value = chat.title;
+
+        let handled = false;
+        const saveHandler = () => {
+            if (handled) return;
+            handled = true;
+            const newTitle = input.value.trim();
+            if (newTitle && newTitle !== chat.title) {
+                this.onTitleEdited(chat.id, newTitle);
+            }
+            if (li.contains(input)) {
+                li.replaceChild(titleEl, input);
+            }
+        };
+
+        input.addEventListener('blur', saveHandler);
+        input.addEventListener('keydown', (e) => {
+            if (e.key === 'Enter') {
+                saveHandler();
+            } else if (e.key === 'Escape') {
+                if (handled) return;
+                handled = true;
+                if (li.contains(input)) {
+                    li.replaceChild(titleEl, input);
+                }
+            }
+        });
+
+        li.replaceChild(input, titleEl);
+        input.focus();
+    }
+}
+
+export default ChatListView;

js/components/chatlog.js

@@ -0,0 +1,530 @@
+/**
+ * @fileoverview Defines the data structures for the chat history.
+ */
+
+'use strict';
+
+import { log } from '../utils/logger.js';
+import { hooks } from '../hooks.js';
+
+/**
+ * @class Message
+ * Represents a single message in the chatlog.
+ */
+class Message {
+    /**
+     * @param {Object} value - The message value, e.g., { role: 'user', content: 'Hello' }.
+     */
+    constructor(value) {
+        log(5, 'Message: Constructor called with value', value);
+        this.value = value;
+        this.metadata = null;
+        this.cache = null;
+        this.answerAlternatives = null;
+    }
+
+    /**
+     * Retrieves the active answer message if alternatives exist.
+     * @returns {Message | null} The active answer message or null.
+     */
+    getAnswerMessage() {
+        log(5, 'Message: getAnswerMessage called');
+        return this.answerAlternatives ? this.answerAlternatives.getActiveMessage() : null;
+    }
+
+    /**
+     * Serializes the message to a JSON-compatible object.
+     * @returns {Object} The serialized message.
+     */
+    toJSON() {
+        log(6, 'Message: toJSON called');
+        return {
+            value: this.value,
+            metadata: this.metadata,
+            answerAlternatives: this.answerAlternatives
+        };
+    }
+
+    /**
+     * Sets the content of the message.
+     * @param {string} content - The new content.
+     */
+    setContent(content) {
+        log(5, 'Message: setContent called');
+        this.value.content = content;
+        this.cache = null;
+    }
+
+    /**
+     * Appends a delta to the content of the message.
+     * @param {string} delta - The content to append.
+     */
+    appendContent(delta) {
+        log(5, 'Message: appendContent called with delta', delta);
+        if (this.value === null) {
+            this.value = { role: 'assistant', content: delta };
+        } else {
+            if (!this.value.content) this.value.content = '';
+            this.value.content += delta;
+        }
+        this.cache = null;
+    }
+}
+
+/**
+ * @class Alternatives
+ * Manages a set of alternative messages at a given point in the chatlog.
+ */
+class Alternatives {
+    constructor() {
+        log(5, 'Alternatives: Constructor called');
+        this.messages = [];
+        this.activeMessageIndex = -1;
+    }
+
+    /**
+     * Adds a new message or updates the active one if it's null.
+     * @param {Object} value - The value for the new message.
+     * @returns {Message} The new or updated message.
+     */
+    addMessage(value) {
+        log(5, 'Alternatives: addMessage called with value', value);
+        this.clearCache();
+        const current = this.getActiveMessage();
+        if (current) {
+            if (current && current.value === null) {
+                current.value = value;
+                return current;
+            }
+        }
+        const newMessage = new Message(value);
+        this.activeMessageIndex = this.messages.push(newMessage) - 1;
+        return newMessage;
+    }
+
+    /**
+     * Gets the currently active message.
+     * @returns {Message | null} The active message or null.
+     */
+    getActiveMessage() {
+        log(5, 'Alternatives: getActiveMessage called');
+        return this.activeMessageIndex !== -1 ? this.messages[this.activeMessageIndex] || null : null;
+    }
+
+    /**
+     * Cycles to the next alternative message.
+     * @returns {Message | null} The next message.
+     */
+    next() {
+        log(5, 'Alternatives: next called');
+        if (this.activeMessageIndex === -1) return null;
+        if (!this.messages[this.activeMessageIndex] || this.messages[this.activeMessageIndex].value === null) {
+            this.messages.splice(this.activeMessageIndex, 1);
+        }
+        this.activeMessageIndex = (this.activeMessageIndex + 1) % this.messages.length;
+        return this.messages[this.activeMessageIndex];
+    }
+
+    /**
+     * Cycles to the previous alternative message.
+     * @returns {Message | null} The previous message.
+     */
+    prev() {
+        log(5, 'Alternatives: prev called');
+        if (this.activeMessageIndex === -1) return null;
+        if (!this.messages[this.activeMessageIndex] || this.messages[this.activeMessageIndex].value === null) {
+            this.messages.splice(this.activeMessageIndex, 1);
+        }
+        this.activeMessageIndex = (this.activeMessageIndex - 1 + this.messages.length) % this.messages.length;
+        return this.messages[this.activeMessageIndex];
+    }
+
+    /**
+     * Clears the cache for all messages in this set of alternatives.
+     */
+    clearCache() {
+        log(5, 'Alternatives: clearCache called');
+        this.messages.forEach(msg => { if (msg) msg.cache = null; });
+    }
+
+    /**
+     * Serializes the alternatives to a JSON-compatible object.
+     * @returns {Object} The serialized alternatives.
+     */
+    toJSON() {
+        log(6, 'Alternatives: toJSON called');
+        return {
+            messages: this.messages.map(msg => msg ? msg.toJSON() : null),
+            activeMessageIndex: this.activeMessageIndex
+        };
+    }
+}
+
+/**
+ * @class Chatlog
+ * Manages the entire chat history as a tree of alternatives.
+ */
+class Chatlog {
+    constructor() {
+        log(5, 'Chatlog: Constructor called');
+        this.rootAlternatives = null;
+        this.subscribers = [];
+    }
+
+    /**
+     * Subscribes a callback to chatlog changes.
+     * @param {Function} cb - The callback to subscribe.
+     */
+    subscribe(cb) {
+        log(5, 'Chatlog: subscribe called');
+        this.subscribers.push(cb);
+    }
+
+    /**
+     * Unsubscribes a callback from chatlog changes.
+     * @param {Function} cb - The callback to unsubscribe.
+     */
+    unsubscribe(cb) {
+        log(5, 'Chatlog: unsubscribe called');
+        this.subscribers = this.subscribers.filter(s => s !== cb);
+    }
+
+    /**
+     * Notifies all subscribers of a change.
+     * @param {boolean} [scroll=true] - Whether to scroll to the bottom.
+     */
+    notify(scroll = true) {
+        log(5, 'Chatlog: notify called');
+        this.subscribers.forEach(cb => cb(scroll));
+        hooks.onChatUpdated.forEach(fn => fn(this));
+    }
+
+    /**
+     * Adds a message to the chatlog.
+     * @param {Object} value - The value of the message to add.
+     * @returns {Message} The newly added message.
+     */
+    addMessage(value) {
+        log(4, 'Chatlog: addMessage called with role', value?.role);
+        const lastMessage = this.getLastMessage();
+        if (!lastMessage) {
+            this.rootAlternatives = new Alternatives();
+            const msg = this.rootAlternatives.addMessage(value);
+            this.notify();
+            return msg;
+        }
+        if (lastMessage.value === null) {
+            lastMessage.value = value;
+            this.notify();
+            return lastMessage;
+        }
+        lastMessage.answerAlternatives = new Alternatives();
+        const msg = lastMessage.answerAlternatives.addMessage(value);
+        this.notify();
+        return msg;
+    }
+
+    /**
+     * Gets the position of a message in the active path.
+     * @param {Message} message - The message to find.
+     * @returns {number} The position of the message.
+     */
+    getMessagePos(message) {
+        log(5, 'Chatlog: getMessagePos called');
+        let pos = 0;
+        let current = this.rootAlternatives;
+        while (current) {
+            const activeMessage = current.getActiveMessage();
+            if (!activeMessage || !activeMessage.answerAlternatives || activeMessage === message) return pos;
+            current = activeMessage.answerAlternatives;
+            pos++;
+        }
+        return 0;
+    }
+
+    /**
+     * Gets the first message in the active path.
+     * @returns {Message | null} The first message.
+     */
+    getFirstMessage() {
+        log(5, 'Chatlog: getFirstMessage called');
+        return this.rootAlternatives ? this.rootAlternatives.getActiveMessage() : null;
+    }
+
+    /**
+     * Gets the last message in the active path.
+     * @returns {Message | null} The last message.
+     */
+    getLastMessage() {
+        log(5, 'Chatlog: getLastMessage called');
+        const lastAlternatives = this.getLastAlternatives();
+        return lastAlternatives ? lastAlternatives.getActiveMessage() : null;
+    }
+
+    /**
+     * Gets the nth message in the active path.
+     * @param {number} n - The index of the message to get.
+     * @returns {Message | null} The nth message.
+     */
+    getNthMessage(n) {
+        log(5, 'Chatlog: getNthMessage called for n', n);
+        const alternatives = this.getNthAlternatives(parseInt(n));
+        return alternatives ? alternatives.getActiveMessage() : null;
+    }
+
+    /**
+     * Gets the alternatives at the nth position in the active path.
+     * @param {number} n - The index of the alternatives to get.
+     * @returns {Alternatives | null} The nth alternatives.
+     */
+    getNthAlternatives(n) {
+        log(5, 'Chatlog: getNthAlternatives called for n', n);
+        let pos = 0;
+        let current = this.rootAlternatives;
+        while (current) {
+            if (pos >= n) return current;
+            const activeMessage = current.getActiveMessage();
+            if (!activeMessage || !activeMessage.answerAlternatives) break;
+            current = activeMessage.answerAlternatives;
+            pos++;
+        }
+        return null;
+    }
+
+    /**
+     * Gets the last set of alternatives in the active path.
+     * @returns {Alternatives | null} The last alternatives.
+     */
+    getLastAlternatives() {
+        log(5, 'Chatlog: getLastAlternatives called');
+        let current = this.rootAlternatives;
+        let last = current;
+        while (current) {
+            last = current;
+            const activeMessage = current.getActiveMessage();
+            if (!activeMessage || !activeMessage.answerAlternatives) break;
+            current = activeMessage.answerAlternatives;
+        }
+        return last;
+    }
+
+    /**
+     * Returns an array of active message values along the path.
+     * @returns {Array<Object>} The active message values.
+     */
+    getActiveMessageValues() {
+        log(5, 'Chatlog: getActiveMessageValues called');
+        const result = [];
+        let message = this.getFirstMessage();
+        while (message && message.value) {
+            result.push(message.value);
+            message = message.getAnswerMessage();
+        }
+        return result;
+    }
+
+    /**
+     * Loads the chatlog from serialized alternatives data.
+     * @param {Object} alternativesData - The serialized alternatives data.
+     */
+    load(alternativesData) {
+        log(5, 'Chatlog: load called');
+        let msgCount = 0;
+        const buildAlternatives = (data) => {
+            if (!data) return null;
+            const alt = new Alternatives();
+            alt.activeMessageIndex = data.activeMessageIndex;
+            data.messages.forEach(parsedMsg => {
+                if (!parsedMsg) return;
+                const msg = new Message(parsedMsg.value);
+                msg.metadata = parsedMsg.metadata;
+                msg.answerAlternatives = buildAlternatives(parsedMsg.answerAlternatives);
+                alt.messages.push(msg);
+                msgCount++;
+            });
+            return alt;
+        };
+        this.rootAlternatives = buildAlternatives(alternativesData);
+        this.clean();
+        log(3, 'Chatlog: Loaded with message count', msgCount);
+        this.notify();
+    }
+
+    /**
+     * Removes messages with null values (incomplete messages).
+     */
+    clean() {
+        log(4, 'Chatlog: clean called');
+        if (!this.rootAlternatives) return;
+        const badMessages = [];
+        const stack = [this.rootAlternatives];
+        while (stack.length > 0) {
+            const alt = stack.pop();
+            alt.messages.forEach(msg => {
+                if (msg.value === null || (msg.value && msg.value.content === null)) {
+                    badMessages.push(msg);
+                }
+                if (msg.answerAlternatives) stack.push(msg.answerAlternatives);
+            });
+        }
+        badMessages.forEach(msg => this.deleteMessage(msg));
+        this.notify();
+    }
+
+    /**
+     * Clears all caches in the chatlog.
+     */
+    clearCache() {
+        log(4, 'Chatlog: clearCache called');
+        this.load(this.rootAlternatives);
+    }
+
+    /**
+     * Finds the Alternatives object that contains the given message.
+     * @param {Message} messageToFind - The message to find.
+     * @returns {Alternatives | null} The Alternatives object or null if not found.
+     */
+    findAlternativesForMessage(messageToFind) {
+        if (!this.rootAlternatives) return null;
+        const stack = [this.rootAlternatives];
+        while (stack.length > 0) {
+            const alts = stack.pop();
+            if (alts.messages.includes(messageToFind)) {
+                return alts;
+            }
+            alts.messages.forEach(msg => {
+                if (msg.answerAlternatives) {
+                    stack.push(msg.answerAlternatives);
+                }
+            });
+        }
+        return null;
+    }
+
+    /**
+     * Finds the parent message of a given Alternatives object.
+     * @param {Alternatives} alternativesToFind - The alternatives object to find the parent of.
+     * @returns {Message | null} The parent message or null if it's the root.
+     */
+    findParentOfAlternatives(alternativesToFind) {
+        if (!this.rootAlternatives || this.rootAlternatives === alternativesToFind) {
+            return null;
+        }
+        const stack = [this.rootAlternatives];
+        while (stack.length > 0) {
+            const alts = stack.pop();
+            for (const msg of alts.messages) {
+                if (msg.answerAlternatives === alternativesToFind) {
+                    return msg;
+                }
+                if (msg.answerAlternatives) {
+                    stack.push(msg.answerAlternatives);
+                }
+            }
+        }
+        return null;
+    }
+
+    /**
+     * Deletes a specific message from the chatlog and all subsequent messages.
+     * @param {Message} message - The message object to delete.
+     */
+    deleteMessage(message) {
+        log(4, 'Chatlog: deleteMessage called for', message);
+        const alternatives = this.findAlternativesForMessage(message);
+        if (!alternatives) return;
+
+        const index = alternatives.messages.indexOf(message);
+        if (index === -1) return;
+
+        alternatives.messages.splice(index, 1);
+
+        if (alternatives.messages.length === 0) {
+            const parent = this.findParentOfAlternatives(alternatives);
+            if (parent) {
+                parent.answerAlternatives = null;
+            } else if (alternatives === this.rootAlternatives) {
+                this.rootAlternatives = null;
+            }
+        } else {
+            if (alternatives.activeMessageIndex === index) {
+                alternatives.activeMessageIndex = Math.max(0, alternatives.messages.length - 1);
+            } else if (alternatives.activeMessageIndex > index) {
+                alternatives.activeMessageIndex--;
+            }
+        }
+
+        alternatives.clearCache();
+        this.notify();
+    }
+
+    /**
+     * Deletes only the message at the nth position, preserving subsequent messages by relinking.
+     * @param {number} pos - The position of the message to delete.
+     */
+    deleteNthMessage(pos) {
+        log(4, 'Chatlog: deleteNthMessage called for pos', pos);
+        const msgToDelete = this.getNthMessage(pos);
+        if (!msgToDelete) return;
+
+        const childAlternatives = msgToDelete.answerAlternatives;
+
+        if (pos === 0) {
+            // If we're deleting the root message, its children become the new root
+            this.rootAlternatives = childAlternatives;
+        } else {
+            // If we're deleting a message in the middle, link its parent to its children
+            const parentMsg = this.getNthMessage(pos - 1);
+            if (parentMsg) {
+                parentMsg.answerAlternatives = childAlternatives;
+            }
+        }
+        this.notify();
+    }
+
+    /**
+     * Cycles through the alternative messages for a given message.
+     * @param {Message} message - The message whose alternatives to cycle.
+     * @param {'next' | 'prev'} direction - The direction to cycle.
+     */
+    cycleAlternatives(message, direction) {
+        log(4, `Chatlog: cycleAlternatives called for`, message, `direction: ${direction}`);
+        const alternatives = this.findAlternativesForMessage(message);
+        if (!alternatives) return;
+
+        if (direction === 'next') {
+            alternatives.next();
+        } else if (direction === 'prev') {
+            alternatives.prev();
+        }
+
+        this.notify(false);
+    }
+
+    /**
+     * Adds a new alternative message at the same level as the given message.
+     * @param {Message} message - The message to add an alternative to.
+     * @param {Object} newValue - The value for the new message.
+     * @returns {Message} The newly created message.
+     */
+    addAlternative(message, newValue) {
+        log(4, `Chatlog: addAlternative called for`, message);
+        const alternatives = this.findAlternativesForMessage(message);
+        if (!alternatives) return null;
+
+        const newMessage = alternatives.addMessage(newValue);
+        this.notify();
+        return newMessage;
+    }
+
+    /**
+     * Serializes the chatlog to a JSON-compatible object.
+     * @returns {Object} The serialized chatlog.
+     */
+    toJSON() {
+        log(5, 'Chatlog: toJSON called');
+        return this.rootAlternatives ? this.rootAlternatives.toJSON() : null;
+    }
+}
+
+export { Chatlog, Message, Alternatives };

js/components/settings-panel.js

@@ -0,0 +1,128 @@
+/**
+ * @fileoverview The SettingsPanel component provides the UI for application settings.
+ */
+
+'use strict';
+
+import { log, triggerError } from '../utils/logger.js';
+import { hooks } from '../hooks.js';
+
+/**
+ * @class SettingsPanel
+ * Manages the settings panel UI.
+ */
+class SettingsPanel {
+    /**
+     * @param {Object} options - The options for the settings panel.
+     * @param {Function} options.configService - The configuration service.
+     * @param {Function} options.app - The main app object.
+     */
+    constructor({ configService, app }) {
+        this.configService = configService;
+        this.app = app;
+
+        this.ui = {
+            settingsEl: document.getElementById('settings'),
+            settingsButton: document.getElementById('settingsButton'),
+            endpointEl: document.getElementById('endpoint'),
+            apiKeyEl: document.getElementById('apiKey'),
+            loginBtn: document.getElementById('login-btn'),
+            logoutBtn: document.getElementById('logout-btn'),
+        };
+
+        this.init();
+    }
+
+    /**
+     * Initializes the settings panel by setting up event listeners.
+     */
+    init() {
+        log(3, 'SettingsPanel: init called');
+        this.ui.settingsButton.addEventListener('click', () => this.toggle());
+
+        // Other Buttons
+        this.ui.loginBtn.addEventListener('click', () => this.handleLogin());
+        this.ui.logoutBtn.addEventListener('click', () => this.handleLogout());
+    }
+
+    /**
+     * Toggles the visibility of the settings panel.
+     */
+    toggle(state = 'toggle') {
+        let isOpen;
+        switch (state) {
+            case 'open':
+                this.ui.settingsEl.classList.add('open');
+                isOpen = true;
+                break;
+            case 'close':
+                this.ui.settingsEl.classList.remove('open');
+                break;
+            case 'toggle':
+            default:
+                isOpen = this.ui.settingsEl.classList.toggle('open');
+                break;
+        }
+        if (isOpen) {
+            const globalSettings = this.configService.getModelSettings();
+            // Pass null for chatId and agentId to indicate global scope
+            const container = document.getElementById('global-model-settings-container');
+            hooks.onModelSettingsRender.forEach(fn => fn(container, globalSettings, null, null));
+        }
+    }
+
+    /**
+     * Handles the login button click.
+     */
+    handleLogin() {
+        log(4, 'SettingsPanel: handleLogin called');
+        const apiKey = this.ui.apiKeyEl.value.trim();
+        const endpoint = this.ui.endpointEl.value.trim();
+        if (!endpoint) {
+            triggerError('Please enter an API Endpoint.');
+            return;
+        }
+        if (apiKey) {
+            this.configService.setItem('apiKey', apiKey);
+        } else {
+            this.configService.removeItem('apiKey');
+        }
+        if (endpoint) {
+            this.configService.setItem('endpoint', endpoint);
+        } else {
+            this.configService.removeItem('endpoint');
+        }
+        this.app.handleLogin();
+    }
+
+    /**
+     * Handles the logout button click.
+     */
+    handleLogout() {
+        this.ui.apiKeyEl.value = '';
+        this.ui.endpointEl.value = '';
+        this.configService.removeItem('apiKey');
+        this.configService.removeItem('endpoint');
+        this.app.handleLogin();
+        hooks.onLogout.forEach(fn => fn(this.ui.settingsEl));
+    }
+
+    /**
+     * Sets the API key in the input field.
+     * @param {string} apiKey - The API key to set.
+     */
+    setApiKey(apiKey) {
+        this.ui.apiKeyEl.value = apiKey;
+    }
+
+    /**
+     * Sets the endpoint in the input field.
+     * @param {string} endpoint - The endpoint to set.
+     */
+    setEndpoint(endpoint) {
+        this.ui.endpointEl.value = endpoint;
+    }
+
+}
+
+export default SettingsPanel;

js/config.js

@@ -0,0 +1,57 @@
+/**
+ * @fileoverview Configuration constants for the application.
+ */
+
+'use strict';
+
+/**
+ * The initial system prompt defining AI behavior and capabilities.
+ * @type {string}
+ */
+export const firstPrompt = `You have the ability to present perspectives and provide real-time date and time information.
+You can create and understand visuals, such as images, graphs, and charts, using SVG technology.
+Unless otherwise specified by the user, always use SVG for drawings.
+Express mathematical equations using latex notation, symbolized by $ and $$.
+Use Markdown wherever possible.
+
+Strictly adhere to user instructions, and in the event of conflicting directives, seek clarification or prioritize based on the user's needs.
+Be aware of the user's level of knowledge in the fields of programming and science to tailor your responses accordingly.
+If you don't know the user's level of knowledge, assume a very high level of knowledge.
+
+Before responding, thoroughly analyze the user's problem, considering the most efficient strategy to tackle and solve it step by step.
+If you encounter an issue you can't solve or an error in your processes, communicate this clearly to the user and seek further guidance.
+
+Always apply thoughtful consideration in all tasks.
+Your responses are backed by your extensive knowledge in programming and science.
+Be clear in articulating any ambiguities to ensure effective communication.`;
+
+/**
+ * The initial message displayed in new chats.
+ * @type {string}
+ */
+export const startMessage = '';
+
+/**
+ * SVG icon for the submit button.
+ * @type {string}
+ */
+export const messageSubmit = '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M6 6.741c0-1.544 1.674-2.505 3.008-1.728l9.015 5.26c1.323.771 1.323 2.683 0 3.455l-9.015 5.258C7.674 19.764 6 18.803 6 17.26V6.741zM17.015 12L8 6.741V17.26L17.015 12z" fill="currentColor"/></svg>';
+
+/**
+ * SVG icon for the stop button.
+ * @type {string}
+ */
+export const messageStop = '<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5 7a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V7zm12 0H7v10h10V7z" fill="currentColor"/></svg>';
+
+/**
+ * The default API endpoint.
+ * @type {string}
+ */
+export const defaultEndpoint = 'http://localhost:1234/v1/chat/completions';
+
+/**
+ * The debug level for logging.
+ * 0: none, 1: errors, 2: warnings, 3: info, 4: debug, 5: trace, 6: full trace (includes partial AI messages during streaming)
+ * @type {number}
+ */
+export const DEBUG_LEVEL = 3;

js/hooks.js

@@ -0,0 +1,81 @@
+'use strict';
+
+export const hooks = {
+    beforeUserMessageAdd: [], // Called before adding a user/system message to the chatlog. Allows modifying content or cancelling addition. Args: (content, role) => modifiedContent or false to cancel.
+    afterMessageAdd: [], // Called after a message is added to the chatlog. Args: (messageObj).
+    beforeApiCall: [], // Called before making the API call, allows modifying the payload. Args: (payload, chatbox) => modifiedPayload.
+    onChunkReceived: [], // Called when a streaming chunk is received from the API. Args: (deltaContent).
+    onMessageComplete: [], // Called when an assistant message is fully streamed/completed. Args: (messageObj, chatbox).
+    onError: [], // Called on API or processing errors. Args: (error).
+    onFormatContent: [], // Called during content formatting (e.g., for Markdown, etc.). Args: (text, pos) => html.
+    onPostFormatContent: [], // Called after content is formatted into a wrapper element. Args: (wrapperEl, messageObj, pos).
+    onRenderMessage: [], // Called when rendering a message element, allows modifying the DOM element. Args: (el, message).
+    onRenderMessageControls: [], // Called to add controls (buttons) to a message element. Args: (containerEl, message, chatlog, chatbox).
+    onSettingsRender: [], // Called when the settings panel is opened, allows adding elements to it. Args: (settingsEl).
+    onModifySystemPrompt: [], // Called to modify the system prompt before API call. Args: (systemContent) => modifiedSystemContent.
+    onStateChange: [], // Called on central state changes (e.g., receiving, apiKey). Args: (key, value).
+    onChatUpdated: [], // Called when chatlog updates. Args: (chatlog).
+    onGenerateAIResponse: [], // Called to request an AI response. Args: (options, chatlog).
+    onCancel: [], // Called when the user cancels an AI response.
+    onLogout: [], // Called when the user clicks the logout button. Args: (settingsEl).
+    /**
+     * Renders model settings UI elements for the chat with ID chatId (or main settings if null), and optionally for agentId.
+     * @param {HTMLElement} modelSettingsEl - The container element for settings UI.
+     * @param {Object} modelSettings - The settings data object (global, per-chat, or per-agent).
+     * @param {string|null} chatId - The chat ID or null for global.
+     * @param {string|null} agentId - The agent ID or null if not agent-specific.
+     */
+    onModelSettingsRender: [],
+    /**
+     * Modifies the API payload with model settings.
+     * @param {Object} payload - The API payload to modify.
+     * @param {Object} modelSettings - The merged settings (global + per-chat + per-agent).
+     */
+    onModelSettings: [],
+    /**
+     * Exports model settings to storage/JSON.
+     * @param {Object} modelSettingsExport - The export data structure.
+     * @param {Object} modelSettings - The settings to export.
+     */
+    onModelSettingsExport: [],
+    /**
+     * Imports model settings from storage/JSON.
+     * @param {Object} modelSettingsImport - The imported data.
+     * @param {Object} modelSettings - The settings object to populate.
+     */
+    onModelSettingsImport: [],
+    /**
+     * Aggregates settings from various plugins.
+     * @param {Object} settings - The settings object to be populated.
+     */
+    onGetModelSettings: [],
+    /**
+     * Delegates the update of a specific setting to the relevant plugin.
+     * @param {string} key - The setting key.
+     * @param {*} value - The setting value.
+     */
+    onUpdateModelSettings: [],
+    /**
+     * Handles changes to model settings, persisting them.
+     * @param {HTMLElement} modelSettingsEl - The settings UI element.
+     * @param {Object} modelSettings - The updated settings.
+     * @param {string|null} chatId - The chat ID or null.
+     * @param {string|null} agentId - The agent ID or null.
+     */
+    onModelSettingsChanged: [],
+};
+
+window.hooks = hooks; // TODO: only for testing: remove
+
+export function registerPlugin(plugin, app) {
+    if (plugin.init) {
+        plugin.init(app);
+    }
+    Object.entries(plugin.hooks || {}).forEach(([hookName, fn]) => {
+        if (hooks[hookName]) {
+            hooks[hookName].push(fn);
+        } else {
+            console.warn(`Unknown hook ${hookName} in plugin`);
+        }
+    });
+}

js/main.js

@@ -0,0 +1,12 @@
+/**
+ * @fileoverview Main entry point for the application.
+ */
+
+'use strict';
+
+import App from './app.js';
+
+document.addEventListener('DOMContentLoaded', async () => {
+    const app = new App();
+    await app.init();
+});

js/plugins/agents.js

@@ -0,0 +1,1110 @@
+/**
+ * @fileoverview Plugin for agents and flow management.
+ */
+
+'use strict';
+
+import { log, triggerError } from '../utils/logger.js';
+import { hooks } from '../hooks.js';
+import { parseFunctionCalls } from '../utils/parsers.js';
+import { addAlternativeToChat } from '../utils/chat.js';
+import { createControlButton } from '../utils/ui.js';
+import { processToolCalls, exportJson, importJson } from '../utils/shared.js';
+import { defaultEndpoint } from '../config.js';
+
+const INTERACTIVE_TAGS = ['INPUT', 'TEXTAREA', 'SELECT', 'OPTION', 'BUTTON', 'LABEL'];
+
+// --- UI Rendering Functions ---
+function renderAgentList(store) {
+    const agentList = document.getElementById('agent-list');
+    agentList.innerHTML = '';
+    const chat = store.get('currentChat');
+    if (!chat || !chat.agents) return;
+    chat.agents.forEach(agent => {
+        const card = document.createElement('div');
+        const isActive = agent.id === chat.activeAgentId;
+        card.className = `agent-card ${isActive ? 'active' : ''}`;
+        card.innerHTML = `
+            <h3>${agent.name}</h3><p>${agent.description}</p>
+            <div class="agent-card-buttons">
+                <button class="agents-flow-btn activate-agent-btn" data-id="${agent.id}">${isActive ? 'Deactivate' : 'Activate'}</button>
+                <button class="agents-flow-btn edit-agent-btn" data-id="${agent.id}">Edit</button>
+                <button class="agents-flow-btn delete-agent-btn" data-id="${agent.id}">Delete</button>
+            </div>`;
+        agentList.appendChild(card);
+    });
+}
+
+function showAgentForm(agent, store) {
+    const formContainer = document.getElementById('agent-form-container');
+    const form = document.getElementById('agent-form');
+    form.reset();
+    document.getElementById('agent-id').value = agent ? agent.id : '';
+
+    const modelSettingsEl = document.getElementById('agent-model-settings');
+    const useCustomSettingsCheckbox = document.getElementById('agent-use-custom-settings');
+
+    modelSettingsEl.innerHTML = ''; // Clear previous settings
+
+    if (agent) {
+        document.getElementById('agent-name').value = agent.name;
+        document.getElementById('agent-description').value = agent.description;
+        document.getElementById('agent-system-prompt').value = agent.systemPrompt;
+        document.getElementById('agent-available-as-tool').checked = agent.availableAsTool;
+        useCustomSettingsCheckbox.checked = agent.useCustomModelSettings || false;
+
+        modelSettingsEl.style.display = useCustomSettingsCheckbox.checked ? 'block' : 'none';
+
+        const chat = store.get('currentChat');
+        if (useCustomSettingsCheckbox.checked) {
+            if (!agent.modelSettings) agent.modelSettings = {};
+            hooks.onModelSettingsRender.forEach(fn => fn(modelSettingsEl, agent.modelSettings, chat.id, agent.id));
+        }
+    } else {
+        useCustomSettingsCheckbox.checked = false;
+        modelSettingsEl.style.display = 'none';
+    }
+
+    // Use a fresh listener to avoid duplicates
+    const newCheckbox = useCustomSettingsCheckbox.cloneNode(true);
+    useCustomSettingsCheckbox.parentNode.replaceChild(newCheckbox, useCustomSettingsCheckbox);
+    newCheckbox.addEventListener('change', (e) => {
+        modelSettingsEl.style.display = e.target.checked ? 'block' : 'none';
+        if (e.target.checked && agent) {
+             const chat = store.get('currentChat');
+             if (!agent.modelSettings) agent.modelSettings = {};
+             hooks.onModelSettingsRender.forEach(fn => fn(modelSettingsEl, agent.modelSettings, chat.id, agent.id));
+        }
+    });
+    formContainer.style.display = 'block';
+}
+
+function hideAgentForm() {
+    document.getElementById('agent-form-container').style.display = 'none';
+}
+
+function renderFlow(store) {
+    const chat = store.get('currentChat');
+    const nodeContainer = document.getElementById('flow-node-container');
+    const svgLayer = document.getElementById('flow-svg-layer');
+    nodeContainer.innerHTML = '';
+    svgLayer.innerHTML = '';
+    if (!chat || !chat.flow) return;
+
+    const defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs');
+    const marker = document.createElementNS('http://www.w3.org/2000/svg', 'marker');
+    marker.setAttribute('id', 'arrowhead');
+    marker.setAttribute('viewBox', '0 0 10 10');
+    marker.setAttribute('refX', '15');
+    marker.setAttribute('refY', '5');
+    marker.setAttribute('markerWidth', '6');
+    marker.setAttribute('markerHeight', '6');
+    marker.setAttribute('orient', 'auto-start-reverse');
+    const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+    path.setAttribute('d', 'M 0 0 L 10 5 L 0 10 z');
+    path.setAttribute('fill', 'var(--text-color)');
+    marker.appendChild(path);
+    defs.appendChild(marker);
+    svgLayer.appendChild(defs);
+
+    (chat.flow.steps || []).forEach(step => {
+        const node = document.createElement('div');
+        node.className = 'flow-step-card';
+        if (step.type) {
+            node.classList.add(`flow-step-${step.type}`);
+        }
+        if (step.isMinimized) {
+            node.classList.add('minimized');
+        }
+        node.dataset.id = step.id;
+        node.style.left = `${step.x}px`;
+        node.style.top = `${step.y}px`;
+        let content = '';
+        const type = step.type || 'agent'; // Default to agent for old steps
+        const agentOptions = (chat.agents || []).map(a => `<option value="${a.id}" ${step.agentId === a.id ? 'selected' : ''}>${a.name}</option>`).join('');
+
+        switch (type) {
+            case 'simple-prompt':
+                content = `
+                    <h4>Simple Prompt</h4>
+                    <div class="flow-step-content">
+                        <label>Agent:</label>
+                        <select class="flow-step-agent flow-step-input" data-id="${step.id}"><option value="">Select Agent</option>${agentOptions}</select>
+                        <label>Prompt:</label>
+                        <textarea class="flow-step-prompt flow-step-input" rows="3" data-id="${step.id}">${step.prompt || ''}</textarea>
+                    </div>
+                `;
+                break;
+            case 'prompt-and-clear':
+                content = `
+                    <h4>Prompt and Clear</h4>
+                    <div class="flow-step-content">
+                        <label>Agent:</label>
+                        <select class="flow-step-agent flow-step-input" data-id="${step.id}"><option value="">Select Agent</option>${agentOptions}</select>
+                        <label>Prompt:</label>
+                        <textarea class="flow-step-prompt flow-step-input" rows="3" data-id="${step.id}">${step.prompt || ''}</textarea>
+                    </div>
+                `;
+                break;
+            case 'conditional-stop':
+                content = `
+                    <h4>Conditional Stop</h4>
+                    <div class="flow-step-content">
+                        <label>Last Response Condition:</label>
+                        <select class="flow-step-condition-type flow-step-input" data-id="${step.id}">
+                            <option value="contains" ${step.conditionType === 'contains' ? 'selected' : ''}>Contains String</option>
+                            <option value="matches" ${step.conditionType === 'matches' ? 'selected' : ''}>Matches String</option>
+                            <option value="regex" ${step.conditionType === 'regex' ? 'selected' : ''}>Matches Regex</option>
+                        </select>
+                        <textarea class="flow-step-condition flow-step-input" rows="2" data-id="${step.id}" placeholder="Enter value...">${step.condition || ''}</textarea>
+                        <label>On Match:</label>
+                        <select class="flow-step-on-match flow-step-input" data-id="${step.id}">
+                            <option value="stop" ${step.onMatch === 'stop' ? 'selected' : ''}>Stop flow</option>
+                            <option value="continue" ${step.onMatch === 'continue' ? 'selected' : ''}>Must match to continue</option>
+                        </select>
+                    </div>
+                `;
+                break;
+            case 'branching-prompt':
+                content = `
+                    <h4>Branching Prompt</h4>
+                    <div class="flow-step-content">
+                        <label>Last Response Condition:</label>
+                        <select class="flow-step-condition-type flow-step-input" data-id="${step.id}">
+                            <option value="contains" ${step.conditionType === 'contains' ? 'selected' : ''}>Contains String</option>
+                            <option value="matches" ${step.conditionType === 'matches' ? 'selected' : ''}>Matches String</option>
+                            <option value="regex" ${step.conditionType === 'regex' ? 'selected' : ''}>Matches Regex</option>
+                        </select>
+                        <textarea class="flow-step-condition flow-step-input" rows="2" data-id="${step.id}" placeholder="Enter value...">${step.condition || ''}</textarea>
+                    </div>
+                `;
+                break;
+            case 'multi-prompt':
+                content = `
+                    <h4>Multi Prompt</h4>
+                    <div class="flow-step-content">
+                        <label>Agent:</label>
+                        <select class="flow-step-agent flow-step-input" data-id="${step.id}"><option value="">Select Agent</option>${agentOptions}</select>
+                        <label>Prompt:</label>
+                        <textarea class="flow-step-prompt flow-step-input" rows="3" data-id="${step.id}">${step.prompt || ''}</textarea>
+                        <label>Number of alternatives:</label>
+                        <input type="number" class="flow-step-count flow-step-input" data-id="${step.id}" value="${step.count || 1}" min="1" max="10">
+                    </div>
+                `;
+                break;
+            case 'consolidator':
+                content = `
+                    <h4>Alternatives Consolidator</h4>
+                    <div class="flow-step-content">
+                        <label>Agent:</label>
+                        <select class="flow-step-agent flow-step-input" data-id="${step.id}"><option value="">Select Agent</option>${agentOptions}</select>
+                        <label>Text before alternatives:</label>
+                        <textarea class="flow-step-pre-prompt flow-step-input" rows="2" data-id="${step.id}">${step.prePrompt || ''}</textarea>
+                        <label>Text after alternatives:</label>
+                        <textarea class="flow-step-post-prompt flow-step-input" rows="2" data-id="${step.id}">${step.postPrompt || ''}</textarea>
+                    </div>
+                `;
+                break;
+        }
+
+        let outputConnectors = '';
+        if (type === 'branching-prompt') {
+            outputConnectors = `
+                <div class="connector-group">
+                    <div class="connector bottom" data-id="${step.id}" data-type="out" data-output-name="pass"><span class="connector-label">Pass</span></div>
+                    <div class="connector bottom" data-id="${step.id}" data-type="out" data-output-name="fail"><span class="connector-label">Fail</span></div>
+                </div>
+            `;
+        } else {
+            outputConnectors = `<div class="connector bottom" data-id="${step.id}" data-type="out" data-output-name="default"></div>`;
+        }
+
+
+        node.innerHTML = `
+            <button class="minimize-flow-step-btn" data-id="${step.id}">${step.isMinimized ? '+' : '-'}</button>
+            <div class="connector top" data-id="${step.id}" data-type="in"></div>
+            ${content}
+            <div class="flow-step-content">
+                <button class="delete-flow-step-btn agents-flow-btn" data-id="${step.id}">Delete Step</button>
+            </div>
+            ${outputConnectors}
+        `;
+        nodeContainer.appendChild(node);
+    });
+
+    (chat.flow.connections || []).forEach(conn => {
+        const fromNode = nodeContainer.querySelector(`.flow-step-card[data-id="${conn.from}"]`);
+        const toNode = nodeContainer.querySelector(`.flow-step-card[data-id="${conn.to}"]`);
+        if (fromNode && toNode) {
+            const outConnector = fromNode.querySelector(`.connector.bottom[data-output-name="${conn.outputName || 'default'}"]`);
+            const inConnector = toNode.querySelector('.connector.top');
+            if (!outConnector) {
+                console.error('Could not find output connector for connection:', conn);
+                return;
+            }
+            const x1 = fromNode.offsetLeft + outConnector.offsetLeft + outConnector.offsetWidth / 2;
+            const y1 = fromNode.offsetTop + outConnector.offsetTop + outConnector.offsetHeight / 2;
+            const x2 = toNode.offsetLeft + inConnector.offsetLeft + inConnector.offsetWidth / 2;
+            const y2 = toNode.offsetTop + inConnector.offsetTop + inConnector.offsetHeight / 2;
+            const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
+            line.setAttribute('x1', x1);
+            line.setAttribute('y1', y1);
+            line.setAttribute('x2', x2);
+            line.setAttribute('y2', y2);
+            line.setAttribute('stroke', 'var(--text-color)');
+            line.setAttribute('stroke-width', '2');
+            line.setAttribute('marker-end', 'url(#arrowhead)');
+            svgLayer.appendChild(line);
+
+            // Create a proper HTML button for deleting connections
+            const deleteBtn = createControlButton(
+                'Delete Connection',
+                '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7 4a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v2h4a1 1 0 1 1 0 2h-1.069l-.867 12.142A2 2 0 0 1 17.069 22H6.93a2 2 0 0 1-1.995-1.858L4.07 8H3a1 1 0 0 1 0-2h4V4zm2 2h6V4H9v2zM6.074 8l.857 12H17.07l.857-12H6.074zM10 10a1 1 0 0 1 1 1v6a1 1 0 1 1-2 0v-6a1 1 0 0 1 1-1zm4 0a1 1 0 0 1 1 1v6a1 1 0 1 1-2 0v-6a1 1 0 0 1 1-1z" fill="currentColor"/></svg>');
+            deleteBtn.classList.add('delete-connection-btn');
+            deleteBtn.dataset.from = conn.from;
+            deleteBtn.dataset.to = conn.to;
+            deleteBtn.dataset.outputName = conn.outputName || 'default';
+            deleteBtn.style.position = 'absolute';
+            deleteBtn.style.left = `${(x1 + x2) / 2 - 12}px`;
+            deleteBtn.style.top = `${(y1 + y2) / 2 - 12}px`;
+            deleteBtn.style.zIndex = '10';
+            nodeContainer.appendChild(deleteBtn);
+        }
+    });
+}
+
+// --- Main Plugin Object ---
+const agentsPlugin = {
+    name: 'agents',
+    app: null,
+    store: null,
+    flowRunning: false,
+    currentStepId: null,
+    stepCounter: 0,
+    maxSteps: 20,
+    dragInfo: { active: false, target: null, offsetX: 0, offsetY: 0 },
+    panInfo: { active: false, startX: 0, startY: 0, scrollLeft: 0, scrollTop: 0 },
+    connectionInfo: { active: false, fromNode: null, fromConnector: null, tempLine: null },
+    multiMessageInfo: { active: false, step: null, counter: 0, messageToBranchFrom: null },
+
+    init: function(app) {
+        this.app = app;
+        this.store = app.store;
+
+        // Dynamically add tabs
+        const tabs = document.getElementById('main-tabs');
+        const agentsTabButton = document.createElement('button');
+        agentsTabButton.classList.add('tab-button');
+        agentsTabButton.dataset.tab = 'agents';
+        agentsTabButton.textContent = 'Agents';
+        tabs.appendChild(agentsTabButton);
+
+        const flowTabButton = document.createElement('button');
+        flowTabButton.classList.add('tab-button');
+        flowTabButton.dataset.tab = 'flow';
+        flowTabButton.textContent = 'Flow';
+        tabs.appendChild(flowTabButton);
+
+        // Dynamically add tab panes
+        const tabContent = document.getElementById('tab-content');
+        const agentsTabPane = document.createElement('div');
+        agentsTabPane.classList.add('tab-pane');
+        agentsTabPane.id = 'agents-tab-pane';
+        agentsTabPane.innerHTML = `
+            <div class="agents-flow-toolbar">
+                <button id="add-agent-btn" class="agents-flow-btn">Add Agent</button>
+                <button id="export-agents-btn" class="agents-flow-btn">Export Agents</button>
+                <button id="import-agents-btn" class="agents-flow-btn">Import Agents</button>
+            </div>
+            <div id="agent-list"></div>
+            <div id="agent-form-container" style="display: none;">
+                <form id="agent-form">
+                    <input type="hidden" id="agent-id" value="">
+                    <label for="agent-name">Name:</label>
+                    <input type="text" id="agent-name" required>
+                    <label for="agent-description">Description:</label>
+                    <textarea id="agent-description" rows="2"></textarea>
+                    <label for="agent-system-prompt">System Prompt:</label>
+                    <textarea id="agent-system-prompt" rows="5"></textarea>
+                    <label>
+                        <input type="checkbox" id="agent-available-as-tool">
+                        Available as a tool
+                    </label>
+                    <label>
+                        <input type="checkbox" id="agent-use-custom-settings">
+                        Custom Model Parameters
+                    </label>
+                    <div id="agent-model-settings" style="display: none;"></div>
+                    <div id="agent-form-buttons">
+                        <button type="submit" class="agents-flow-btn">Save Agent</button>
+                        <button type="button" id="cancel-agent-form" class="agents-flow-btn">Cancel</button>
+                    </div>
+                </form>
+            </div>
+        `;
+        tabContent.appendChild(agentsTabPane);
+
+        const flowTabPane = document.createElement('div');
+        flowTabPane.classList.add('tab-pane');
+        flowTabPane.id = 'flow-tab-pane';
+        flowTabPane.innerHTML = `
+            <div class="agents-flow-toolbar">
+                <div class="dropdown">
+                    <button id="add-flow-step-btn-dropdown" class="agents-flow-btn">Add Step &#9662;</button>
+                    <div id="add-step-dropdown-content" class="dropdown-content">
+                        <a href="#" data-step-type="simple-prompt">Simple Prompt</a>
+                        <a href="#" data-step-type="multi-prompt">Multi Prompt</a>
+                        <a href="#" data-step-type="consolidator">Alt. Consolidator</a>
+                        <a href="#" data-step-type="prompt-and-clear">Prompt and Clear</a>
+                        <a href="#" data-step-type="branching-prompt">Branching Prompt</a>
+                        <a href="#" data-step-type="conditional-stop">Conditional Stop</a>
+                    </div>
+                </div>
+                <button id="run-flow-btn" class="agents-flow-btn">Run Flow</button>
+                <button id="export-flow-btn" class="agents-flow-btn">Export Flow</button>
+                <button id="import-flow-btn" class="agents-flow-btn">Load Flow</button>
+            </div>
+            <div id="flow-canvas-wrapper">
+                <div id="flow-canvas">
+                    <svg id="flow-svg-layer"></svg>
+                    <div id="flow-node-container"></div>
+                </div>
+            </div>
+        `;
+        tabContent.appendChild(flowTabPane);
+
+        // --- Event Listeners ---
+        // Tab switching
+        document.getElementById('tabs').addEventListener('click', e => this.handleTabClick(e));
+        // Agent UI
+        document.getElementById('add-agent-btn').addEventListener('click', () => showAgentForm(null, this.store));
+        document.getElementById('cancel-agent-form').addEventListener('click', hideAgentForm);
+        document.getElementById('agent-form').addEventListener('submit', e => this.saveAgent(e));
+        document.getElementById('agent-list').addEventListener('click', e => this.handleAgentListClick(e));
+        document.getElementById('export-agents-btn').addEventListener('click', () => this.exportAgents());
+        document.getElementById('import-agents-btn').addEventListener('click', () => this.importAgents());
+        // Flow UI
+        document.getElementById('add-flow-step-btn-dropdown').addEventListener('click', (e) => {
+            e.stopPropagation();
+            document.getElementById('add-step-dropdown-content').classList.toggle('show');
+        });
+        document.getElementById('add-step-dropdown-content').addEventListener('click', (e) => {
+            if (e.target.tagName === 'A') {
+                const stepType = e.target.dataset.stepType;
+                this.addFlowStep(stepType);
+                document.getElementById('add-step-dropdown-content').classList.remove('show');
+            }
+        });
+        document.getElementById('run-flow-btn').addEventListener('click', () => this.toggleFlow());
+        document.getElementById('export-flow-btn').addEventListener('click', () => this.exportFlow());
+        document.getElementById('import-flow-btn').addEventListener('click', () => this.importFlow());
+
+        window.addEventListener('click', (e) => {
+            if (!e.target.matches('#add-flow-step-btn-dropdown')) {
+                const dropdown = document.getElementById('add-step-dropdown-content');
+                if (dropdown.classList.contains('show')) {
+                    dropdown.classList.remove('show');
+                }
+            }
+        });
+        const canvas = document.getElementById('flow-canvas');
+        canvas.addEventListener('mousedown', e => this.handleFlowCanvasMouseDown(e));
+        canvas.addEventListener('mousemove', e => this.handleFlowCanvasMouseMove(e));
+        canvas.addEventListener('mouseup', e => this.handleFlowCanvasMouseUp(e));
+        canvas.addEventListener('change', e => this.handleFlowStepChange(e));
+        canvas.addEventListener('click', e => this.handleFlowCanvasClick(e));
+
+        // --- Store Subscription ---
+        this.store.subscribe('currentChat', () => {
+            renderAgentList(this.store);
+            setTimeout(() => renderFlow(this.store), 0);
+        });
+
+        // --- Hooks ---
+        hooks.onCancel.push(() => {
+            if (this.flowRunning) this.stopFlow('Execution cancelled by user.');
+        });
+    },
+
+    // --- Event Handlers ---
+    handleTabClick(e) {
+        if (e.target.classList.contains('tab-button')) {
+            const tabName = e.target.dataset.tab;
+            if (tabName === 'flow') {
+                setTimeout(() => renderFlow(this.store), 0);
+            }
+            document.querySelectorAll('#tabs .tab-button, #tab-content .tab-pane').forEach(el => el.classList.remove('active'));
+            e.target.classList.add('active');
+            document.getElementById(`${tabName}-tab-pane`).classList.add('active');
+        }
+    },
+
+    saveAgent(e) {
+        e.preventDefault();
+        const id = document.getElementById('agent-id').value;
+        const chat = this.store.get('currentChat');
+        if (!chat.agents) chat.agents = [];
+
+        const existingAgent = id ? chat.agents.find(a => a.id === id) : null;
+
+        const useCustomSettings = document.getElementById('agent-use-custom-settings').checked;
+        const agentData = {
+            id: id || `agent-${Date.now()}`,
+            name: document.getElementById('agent-name').value,
+            description: document.getElementById('agent-description').value,
+            systemPrompt: document.getElementById('agent-system-prompt').value,
+            availableAsTool: document.getElementById('agent-available-as-tool').checked,
+            useCustomModelSettings: useCustomSettings,
+            modelSettings: existingAgent ? existingAgent.modelSettings : {},
+        };
+
+        if (!useCustomSettings) {
+            agentData.modelSettings = {};
+        }
+
+        const index = existingAgent ? chat.agents.findIndex(a => a.id === id) : -1;
+
+        if (index > -1) {
+            chat.agents[index] = agentData;
+        } else {
+            chat.agents.push(agentData);
+        }
+        this.store.set('currentChat', { ...chat });
+        hideAgentForm();
+    },
+
+    handleAgentListClick(e) {
+        const id = e.target.dataset.id;
+        if (!id) return;
+        const chat = this.store.get('currentChat');
+        if (e.target.classList.contains('activate-agent-btn')) {
+            chat.activeAgentId = chat.activeAgentId === id ? null : id;
+        } else if (e.target.classList.contains('edit-agent-btn')) {
+            const agent = chat.agents.find(a => a.id === id);
+            showAgentForm(agent, this.store);
+        } else if (e.target.classList.contains('delete-agent-btn')) {
+            if (confirm(`Delete agent?`)) {
+                chat.agents = chat.agents.filter(a => a.id !== id);
+                if (chat.activeAgentId === id) chat.activeAgentId = null;
+            }
+        }
+        this.store.set('currentChat', { ...chat });
+    },
+
+    addFlowStep(type = 'simple-prompt') {
+        const chat = this.store.get('currentChat');
+        if (!chat.flow) chat.flow = { steps: [], connections: [] };
+        const newStep = {
+            id: `step-${Date.now()}`,
+            type: type,
+            x: 50,
+            y: 50,
+            isMinimized: false,
+        };
+        switch (type) {
+            case 'simple-prompt':
+                newStep.agentId = '';
+                newStep.prompt = '';
+                break;
+            case 'prompt-and-clear':
+                newStep.agentId = '';
+                newStep.prompt = 'Summarize everything we discussed so far in a way that will allow us to continue our conversation later, only based on that summary.';
+                break;
+            case 'conditional-stop':
+                newStep.conditionType = 'contains';
+                newStep.condition = '';
+                newStep.onMatch = 'stop';
+                break;
+            case 'multi-prompt':
+                newStep.agentId = '';
+                newStep.prompt = '';
+                newStep.count = 2;
+                break;
+            case 'branching-prompt':
+                newStep.conditionType = 'contains';
+                newStep.condition = '';
+                break;
+            case 'consolidator':
+                newStep.agentId = '';
+                newStep.prePrompt = 'Please choose the best of the following answers:';
+                newStep.postPrompt = 'Explain your choice.';
+                break;
+        }
+        chat.flow.steps.push(newStep);
+        this.store.set('currentChat', { ...chat });
+    },
+
+    handleFlowStepChange(e) {
+        const id = e.target.dataset.id;
+        const chat = this.store.get('currentChat');
+        const step = chat.flow.steps.find(s => s.id === id);
+        if (!step) return;
+
+        const target = e.target;
+        if (target.classList.contains('flow-step-agent')) step.agentId = target.value;
+        if (target.classList.contains('flow-step-prompt')) step.prompt = target.value;
+        if (target.classList.contains('flow-step-condition')) step.condition = target.value;
+        if (target.classList.contains('flow-step-condition-type')) step.conditionType = target.value;
+        if (target.classList.contains('flow-step-on-match')) step.onMatch = target.value;
+        if (target.classList.contains('flow-step-count')) step.count = parseInt(target.value, 10);
+        if (target.classList.contains('flow-step-pre-prompt')) step.prePrompt = target.value;
+        if (target.classList.contains('flow-step-post-prompt')) step.postPrompt = target.value;
+
+        this.store.set('currentChat', { ...chat });
+    },
+
+    handleFlowCanvasClick(e) {
+        const chat = this.store.get('currentChat');
+        let chatModified = false;
+
+        const minimizeBtn = e.target.closest('.minimize-flow-step-btn');
+        if (minimizeBtn) {
+            const stepId = minimizeBtn.dataset.id;
+            const step = chat.flow.steps.find(s => s.id === stepId);
+            if (step) {
+                step.isMinimized = !step.isMinimized;
+                chatModified = true;
+            }
+        }
+
+        const stepDeleteBtn = e.target.closest('.delete-flow-step-btn');
+        if (stepDeleteBtn) {
+            const stepId = stepDeleteBtn.dataset.id;
+            if (stepId && confirm('Are you sure you want to delete this step?')) {
+                chat.flow.steps = chat.flow.steps.filter(s => s.id !== stepId);
+                chat.flow.connections = (chat.flow.connections || []).filter(c => c.from !== stepId && c.to !== stepId);
+                chatModified = true;
+            }
+        }
+
+        const connDeleteBtn = e.target.closest('.delete-connection-btn');
+        if (connDeleteBtn) {
+            const fromId = connDeleteBtn.dataset.from;
+            const toId = connDeleteBtn.dataset.to;
+            const outputName = connDeleteBtn.dataset.outputName;
+            if (fromId && toId) {
+                chat.flow.connections = (chat.flow.connections || []).filter(c =>
+                    !(c.from === fromId && c.to === toId && (c.outputName || 'default') === outputName)
+                );
+                chatModified = true;
+            }
+        }
+
+        if (chatModified) {
+            this.store.set('currentChat', { ...chat });
+        }
+    },
+
+    handleFlowCanvasMouseDown(e) {
+        const target = e.target;
+        const canvasWrapper = document.getElementById('flow-canvas-wrapper');
+
+        // Prevent interference with form elements inside a step card
+        if (target.closest('.flow-step-card') && INTERACTIVE_TAGS.includes(target.tagName)) {
+            return;
+        }
+
+        if (target.classList.contains('connector')) {
+            this.connectionInfo.active = true;
+            this.connectionInfo.fromNode = target.closest('.flow-step-card');
+            this.connectionInfo.fromConnector = target;
+            const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
+            line.setAttribute('stroke', 'red');
+            line.setAttribute('stroke-width', '2');
+            this.connectionInfo.tempLine = line;
+            document.getElementById('flow-svg-layer').appendChild(line);
+        } else if (target.closest('.flow-step-card') && !INTERACTIVE_TAGS.includes(target.tagName)) {
+            e.preventDefault();
+            this.dragInfo.active = true;
+            this.dragInfo.target = target.closest('.flow-step-card');
+            this.dragInfo.offsetX = e.clientX - this.dragInfo.target.offsetLeft;
+            this.dragInfo.offsetY = e.clientY - this.dragInfo.target.offsetTop;
+        } else if (e.target.id === 'flow-canvas' || e.target.id === 'flow-node-container' || e.target.id === 'flow-svg-layer') {
+            e.preventDefault();
+            this.panInfo.active = true;
+            this.panInfo.startX = e.clientX;
+            this.panInfo.startY = e.clientY;
+            this.panInfo.scrollLeft = canvasWrapper.scrollLeft;
+            this.panInfo.scrollTop = canvasWrapper.scrollTop;
+            e.target.closest('#flow-canvas').classList.add('panning');
+        }
+    },
+
+    handleFlowCanvasMouseMove(e) {
+        if (this.dragInfo.active) {
+            const newX = e.clientX - this.dragInfo.offsetX;
+            const newY = e.clientY - this.dragInfo.offsetY;
+            this.dragInfo.target.style.left = `${newX}px`;
+            this.dragInfo.target.style.top = `${newY}px`;
+            const step = this.store.get('currentChat').flow.steps.find(s => s.id === this.dragInfo.target.dataset.id);
+            if (step) { step.x = newX; step.y = newY; }
+            renderFlow(this.store);
+        } else if (this.connectionInfo.active) {
+            const fromRect = this.connectionInfo.fromConnector.getBoundingClientRect();
+            const canvasWrapper = document.getElementById('flow-canvas-wrapper');
+            const canvasRect = canvasWrapper.getBoundingClientRect();
+            const startX = fromRect.left - canvasRect.left + fromRect.width / 2 + canvasWrapper.scrollLeft;
+            const startY = fromRect.top - canvasRect.top + fromRect.height / 2 + canvasWrapper.scrollTop;
+            this.connectionInfo.tempLine.setAttribute('x1', startX);
+            this.connectionInfo.tempLine.setAttribute('y1', startY);
+            this.connectionInfo.tempLine.setAttribute('x2', e.clientX - canvasRect.left + canvasWrapper.scrollLeft);
+            this.connectionInfo.tempLine.setAttribute('y2', e.clientY - canvasRect.top + canvasWrapper.scrollTop);
+        } else if (this.panInfo.active) {
+            e.preventDefault();
+            const canvasWrapper = document.getElementById('flow-canvas-wrapper');
+            const dx = e.clientX - this.panInfo.startX;
+            const dy = e.clientY - this.panInfo.startY;
+            canvasWrapper.scrollLeft = this.panInfo.scrollLeft - dx;
+            canvasWrapper.scrollTop = this.panInfo.scrollTop - dy;
+        }
+    },
+
+    handleFlowCanvasMouseUp(e) {
+        if (this.dragInfo.active) {
+            this.store.set('currentChat', { ...this.store.get('currentChat') });
+        } else if (this.connectionInfo.active) {
+            const toConnector = e.target.classList.contains('connector') ? e.target : e.target.closest('.connector');
+            if (toConnector && toConnector.dataset.type === 'in' && toConnector !== this.connectionInfo.fromConnector) {
+                const toNode = toConnector.closest('.flow-step-card');
+                const fromNode = this.connectionInfo.fromNode;
+                const fromConnector = this.connectionInfo.fromConnector;
+                const chat = this.store.get('currentChat');
+
+                if (!chat.flow.connections) chat.flow.connections = [];
+
+                const newConnection = {
+                    from: fromNode.dataset.id,
+                    to: toNode.dataset.id,
+                    outputName: fromConnector.dataset.outputName
+                };
+
+                // Prevent duplicate connections from the same output port
+                const connectionExists = chat.flow.connections.some(c =>
+                    c.from === newConnection.from && c.outputName === newConnection.outputName
+                );
+
+                if (!connectionExists) {
+                    chat.flow.connections.push(newConnection);
+                    this.store.set('currentChat', { ...chat });
+                } else {
+                    log(2, "Connection from this output port already exists.");
+                }
+            }
+            this.connectionInfo.tempLine.remove();
+        } else if (this.panInfo.active) {
+            document.getElementById('flow-canvas').classList.remove('panning');
+        }
+        this.dragInfo.active = false;
+        this.connectionInfo.active = false;
+        this.panInfo.active = false;
+    },
+
+    exportFlow() {
+        const chat = this.store.get('currentChat');
+        if (!chat || !chat.flow) {
+            triggerError('No flow to export.');
+            return;
+        }
+        const filenameBase = `flow_${chat.title.replace(/\s/g, '_')}`;
+        exportJson(chat.flow, filenameBase);
+    },
+
+    importFlow() {
+        importJson('application/json', (importedFlow) => {
+            if (importedFlow && Array.isArray(importedFlow.steps) && Array.isArray(importedFlow.connections)) {
+                const chat = this.store.get('currentChat');
+                chat.flow = importedFlow;
+                this.store.set('currentChat', { ...chat });
+            } else {
+                triggerError('Invalid flow file format.');
+            }
+        });
+    },
+
+    exportAgents() {
+        const chat = this.store.get('currentChat');
+        if (!chat || !chat.agents || chat.agents.length === 0) {
+            triggerError('No agents to export.');
+            return;
+        }
+        const filenameBase = `agents_${chat.title.replace(/\s/g, '_')}`;
+        exportJson(chat.agents, filenameBase);
+    },
+
+    importAgents() {
+        importJson('application/json', (importedAgents) => {
+            if (!Array.isArray(importedAgents)) {
+                triggerError('Invalid agents file format. Expected a JSON array.');
+                return;
+            }
+
+            const chat = this.store.get('currentChat');
+            if (!chat.agents) chat.agents = [];
+
+            const existingAgentIds = new Set(chat.agents.map(a => a.id));
+
+            importedAgents.forEach(importedAgent => {
+                if (existingAgentIds.has(importedAgent.id)) {
+                    const index = chat.agents.findIndex(a => a.id === importedAgent.id);
+                    chat.agents[index] = importedAgent;
+                } else {
+                    chat.agents.push(importedAgent);
+                }
+            });
+
+            this.store.set('currentChat', { ...chat });
+        });
+    },
+
+    // --- Flow Execution Logic ---
+    toggleFlow() {
+        if (this.flowRunning) this.stopFlow();
+        else this.startFlow();
+    },
+
+    updateRunButton(isRunning) {
+        document.getElementById('run-flow-btn').textContent = isRunning ? 'Stop Flow' : 'Run Flow';
+    },
+
+    stopFlow(message = 'Flow stopped.') {
+        this.flowRunning = false;
+        this.currentStepId = null;
+        this.multiMessageInfo = { active: false, step: null, counter: 0, messageToBranchFrom: null };
+        this.updateRunButton(false);
+        const chat = this.store.get('currentChat');
+        if (chat) {
+            chat.activeAgentId = null;
+            this.store.set('currentChat', { ...chat });
+        }
+        log(3, message);
+    },
+
+    executeStep(step) {
+        if (!this.flowRunning) return;
+        if (this.stepCounter++ >= this.maxSteps) {
+            triggerError('Flow execution stopped: Maximum step limit reached.');
+            this.stopFlow();
+            return;
+        }
+
+        this.currentStepId = step.id;
+        const chat = this.store.get('currentChat');
+        const type = step.type || 'simple-prompt'; // Default to agent for old steps
+        const chatlog = this.app.ui.chatBox.chatlog;
+
+        switch (type) {
+            case 'simple-prompt':
+            case 'prompt-and-clear':
+                if (!step.agentId || !step.prompt) {
+                    triggerError(`Agent step is not fully configured.`);
+                    return this.stopFlow('Step not configured.');
+                }
+                chat.activeAgentId = step.agentId;
+                this.store.set('currentChat', { ...chat });
+                this.app.submitUserMessage(step.prompt, 'user');
+                break;
+            case 'branching-prompt':
+                const bpLastMessage = this.app.ui.chatBox.chatlog.getLastMessage()?.value.content || '';
+                let bpIsMatch = false;
+                const bpCondition = step.condition || '';
+
+                try {
+                    switch(step.conditionType) {
+                        case 'regex':
+                            bpIsMatch = new RegExp(bpCondition).test(bpLastMessage);
+                            break;
+                        case 'matches':
+                            bpIsMatch = (bpLastMessage === bpCondition);
+                            break;
+                        case 'contains':
+                        default:
+                            bpIsMatch = bpLastMessage.includes(bpCondition);
+                            break;
+                    }
+                } catch (e) {
+                    triggerError(`Invalid regex in branching step: ${e.message}`);
+                    return this.stopFlow('Invalid regex.');
+                }
+
+                const outputName = bpIsMatch ? 'pass' : 'fail';
+                const nextStep = this.getNextStep(step.id, outputName);
+                if (nextStep) {
+                    this.executeStep(nextStep);
+                } else {
+                    this.stopFlow('Flow execution complete.');
+                }
+                break;
+            case 'multi-prompt':
+                if (!step.agentId || !step.prompt) {
+                    triggerError(`Multi-Message step is not fully configured.`);
+                    return this.stopFlow('Step not configured.');
+                }
+                this.multiMessageInfo.active = true;
+                this.multiMessageInfo.step = step;
+                this.multiMessageInfo.counter = 1;
+                chat.activeAgentId = step.agentId;
+                this.store.set('currentChat', { ...chat });
+
+                chatlog.addMessage({ role: 'user', content: step.prompt });
+                const assistantMessageToBranchFrom = chatlog.addMessage(null);
+                this.multiMessageInfo.messageToBranchFrom = assistantMessageToBranchFrom;
+
+                this.app.generateAIResponse({}, chatlog);
+                break;
+            case 'conditional-stop':
+                const lastMessage = this.app.ui.chatBox.chatlog.getLastMessage()?.value.content || '';
+                let isMatch = false;
+                const condition = step.condition || '';
+
+                try {
+                    switch(step.conditionType) {
+                        case 'regex':
+                            isMatch = new RegExp(condition).test(lastMessage);
+                            break;
+                        case 'matches':
+                            isMatch = (lastMessage === condition);
+                            break;
+                        case 'contains':
+                        default:
+                            isMatch = lastMessage.includes(condition);
+                            break;
+                    }
+                } catch (e) {
+                    triggerError(`Invalid regex in conditional step: ${e.message}`);
+                    return this.stopFlow('Invalid regex.');
+                }
+
+                let shouldContinue = true;
+                if (isMatch) {
+                    if (step.onMatch === 'stop') {
+                        this.stopFlow('Flow stopped by conditional match.');
+                        shouldContinue = false;
+                    }
+                } else {
+                    if (step.onMatch === 'continue') {
+                        this.stopFlow('Flow stopped: condition not met.');
+                        shouldContinue = false;
+                    }
+                }
+
+                if (shouldContinue) {
+                    const nextStep = this.getNextStep(step.id);
+                    if (nextStep) {
+                        this.executeStep(nextStep);
+                    } else {
+                        this.stopFlow('Flow execution complete.');
+                    }
+                }
+                break;
+            case 'consolidator':
+                const activeMessages = chatlog.getActiveMessageValues().map((_, i) => chatlog.getNthMessage(i));
+
+                let sourceMessage = null;
+                for (let i = activeMessages.length - 1; i >= 0; i--) {
+                    const msg = activeMessages[i];
+                    if (msg && msg.answerAlternatives && msg.answerAlternatives.messages.length > 1) {
+                        sourceMessage = msg;
+                        break;
+                    }
+                }
+
+                if (!sourceMessage) {
+                    triggerError(`Consolidator could not find a preceding step with alternatives.`);
+                    return this.stopFlow('Invalid flow structure for Consolidator.');
+                }
+
+                const consolidatedContent = sourceMessage.answerAlternatives.messages.map((alternativeStartMessage, i) => {
+                    let turnContent = '';
+                    let currentMessageInTurn = alternativeStartMessage;
+                    while (currentMessageInTurn) {
+                        if (currentMessageInTurn.value) {
+                            const { role, content } = currentMessageInTurn.value;
+                            turnContent += `**${role.charAt(0).toUpperCase() + role.slice(1)}:**\n${content}\n\n`;
+                        }
+
+                        if (currentMessageInTurn.answerAlternatives && currentMessageInTurn.answerAlternatives.messages.length > 0) {
+                            // In a non-branching chain (like agent-tool-agent), there should only be one message.
+                            // We assume the first message is the continuation of the chain.
+                            currentMessageInTurn = currentMessageInTurn.answerAlternatives.messages[0];
+                        } else {
+                            currentMessageInTurn = null;
+                        }
+                    }
+                    return `--- ALTERNATIVE ${i + 1} ---\n${turnContent.trim()}`;
+                }).join('\n\n');
+
+                const finalPrompt = `${step.prePrompt || ''}\n\n${consolidatedContent}\n\n${step.postPrompt || ''}`;
+                chat.activeAgentId = step.agentId;
+                this.store.set('currentChat', { ...chat });
+                this.app.submitUserMessage(finalPrompt, 'user');
+                break;
+        }
+    },
+
+    startFlow() {
+        log(3, 'Starting flow execution...');
+        const chat = this.store.get('currentChat');
+        const { steps, connections } = chat.flow;
+        if (!steps || steps.length === 0) {
+            triggerError('Flow has no steps.');
+            return;
+        }
+        const nodesWithIncoming = new Set((connections || []).map(c => c.to));
+        const startingNodes = steps.filter(s => !nodesWithIncoming.has(s.id));
+        if (startingNodes.length !== 1) {
+            triggerError('Flow must have exactly one starting node.');
+            return;
+        }
+        this.flowRunning = true;
+        this.stepCounter = 0;
+        this.updateRunButton(true);
+        this.executeStep(startingNodes[0]);
+    },
+    getNextStep(stepId, outputName = 'default') {
+        const chat = this.store.get('currentChat');
+        const connection = chat.flow.connections.find(c => c.from === stepId && (c.outputName || 'default') === outputName);
+        return connection ? chat.flow.steps.find(s => s.id === connection.to) : null;
+    },
+
+    // --- Hooks Definition ---
+    hooks: {
+        onModifySystemPrompt: (systemContent) => {
+            const store = agentsPlugin.store;
+            if (!store) return systemContent;
+            let cleanedContent = systemContent
+                .replace(/\n\n--- AGENT DEFINITION ---\n[\s\S]*?\n--- END AGENT DEFINITION ---/g, '')
+                .replace(/\n\n--- AGENT TOOLS ---\n[\s\S]*?\n--- END AGENT TOOLS ---/g, '');
+            const chat = store.get('currentChat');
+            if (!chat || !chat.activeAgentId) return cleanedContent;
+            const agent = chat.agents.find(a => a.id === chat.activeAgentId);
+            if (!agent) return cleanedContent;
+            let modified = cleanedContent + `\n\n--- AGENT DEFINITION ---\n${agent.systemPrompt}\n--- END AGENT DEFINITION ---`;
+            const tools = chat.agents.filter(a => a.availableAsTool && a.id !== chat.activeAgentId);
+            if (tools.length > 0) {
+                modified += '\n\n--- AGENT TOOLS ---\n';
+
+                modified += `### Agent Tools:
+
+To call an agent tool, use: <dma:tool_call name="agent_name_agent"><parameter name="prompt">...</parameter></dma:tool_call>
+### Available Tools:\n\n`;
+
+                tools.forEach(t => { modified += `- ${t.name}: ${t.description}\n`; });
+                modified += '\n--- END AGENT TOOLS ---';
+            }
+            return modified;
+        },
+        onMessageComplete: async (message, chatlog, chatbox) => {
+            if (!message.value) return; // Defend against null message value
+            const { toolCalls } = parseFunctionCalls(message.value.content);
+
+            // --- Multi-Message Continuation ---
+            if (agentsPlugin.flowRunning && agentsPlugin.multiMessageInfo.active) {
+                if (toolCalls.length > 0) return; // Wait for tool calls to complete
+
+                const { step, counter, messageToBranchFrom } = agentsPlugin.multiMessageInfo;
+                if (counter < step.count) {
+                    agentsPlugin.multiMessageInfo.counter++;
+                    const chat = agentsPlugin.store.get('currentChat');
+                    chat.activeAgentId = step.agentId;
+                    agentsPlugin.store.set('currentChat', { ...chat });
+                    addAlternativeToChat(chatlog, messageToBranchFrom, null);
+                    agentsPlugin.app.generateAIResponse({}, chatlog);
+                    return;
+                } else {
+                    agentsPlugin.multiMessageInfo = { active: false, step: null, counter: 0, messageToBranchFrom: null };
+                }
+            }
+
+            // --- Agent Tool Call Processing ---
+            const context = {
+                app: agentsPlugin.app,
+                store: agentsPlugin.store,
+            };
+            await processToolCalls(message, chatlog, chatbox, filterAgentCalls, executeAgentCall, context);
+
+            // --- Flow Continuation ---
+            // Re-parse *after* processToolCalls might have added its own messages.
+            const newToolCalls = parseFunctionCalls(message.value.content).toolCalls;
+            if (agentsPlugin.flowRunning && newToolCalls.length === 0) {
+                const currentChat = agentsPlugin.store.get('currentChat');
+                const currentStep = currentChat.flow.steps.find(s => s.id === agentsPlugin.currentStepId);
+
+                if (currentStep && currentStep.type === 'prompt-and-clear') {
+                    const activeMessages = chatlog.getActiveMessageValues();
+                    const userMessageIndex = activeMessages.length - 2;
+                    const firstMessage = chatlog.getFirstMessage();
+                    const hasSystemPrompt = firstMessage && firstMessage.value.role === 'system';
+                    const startIndex = hasSystemPrompt ? 1 : 0;
+                    for (let i = userMessageIndex - 1; i >= startIndex; i--) {
+                        chatlog.deleteNthMessage(i);
+                    }
+                }
+
+                const { steps, connections } = currentChat.flow;
+                const nextConnection = connections.find(c => c.from === agentsPlugin.currentStepId);
+                const nextStep = nextConnection ? steps.find(s => s.id === nextConnection.to) : null;
+                if (nextStep) {
+                    agentsPlugin.executeStep(nextStep);
+                } else {
+                    agentsPlugin.stopFlow('Flow execution complete.');
+                }
+            }
+        }
+    }
+};
+function filterAgentCalls(call) {
+    return call.name.endsWith('_agent');
+}
+
+async function executeAgentCall(call, context) {
+    const { app, store } = context;
+    const currentChat = store.get('currentChat');
+    const agentToCall = currentChat.agents.find(a => `${a.name.toLowerCase().replace(/\s+/g, '_')}_agent` === call.name);
+
+    if (!agentToCall) {
+        return { id: call.id, error: `Agent "${call.name}" not found.` };
+    }
+    const prompt = call.params.prompt;
+    if (typeof prompt !== 'string') {
+        return { id: call.id, error: `Agent call to "${call.name}" is missing the "prompt" parameter.` };
+    }
+
+    const payload = {
+        model: app.configService.getItem('model', ''),
+        messages: [
+            { role: 'system', content: agentToCall.systemPrompt },
+            { role: 'user', content: prompt }
+        ],
+        temperature: Number(app.ui.temperatureEl.value),
+        top_p: Number(app.ui.topPEl.value),
+        stream: true
+    };
+
+    try {
+        const reader = await app.apiService.streamAPIResponse(payload, app.configService.getItem('endpoint', defaultEndpoint), app.configService.getItem('apiKey', ''), new AbortController().signal);
+        let responseContent = '';
+        const decoder = new TextDecoder();
+        while (true) {
+            const { done, value } = await reader.read();
+            if (done) break;
+            const chunk = decoder.decode(value);
+            chunk.split('\n').forEach(line => {
+                if (line.startsWith('data: ')) {
+                    const data = line.substring(6);
+                    if (data.trim() !== '[DONE]') {
+                        try {
+                            responseContent += JSON.parse(data).choices[0]?.delta?.content || '';
+                        } catch (e) {
+                            log(2, 'Error parsing agent response chunk', e);
+                        }
+                    }
+                }
+            });
+        }
+        return { id: call.id, content: responseContent };
+    } catch (error) {
+        log(1, 'Agent call failed', error);
+        return { id: call.id, error: error.message || 'Unknown error during agent execution.' };
+    }
+}
+export { agentsPlugin };

js/plugins/avatars.js

@@ -0,0 +1,120 @@
+/**
+ * @fileoverview A plugin for handling user and assistant avatars.
+ */
+
+'use strict';
+
+import { triggerError, log } from '../utils/logger.js';
+
+/**
+ * Default SVG avatar for the user.
+ * @type {string}
+ */
+const avatarPing = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80" width="80" height="80">
+<circle cx="40" cy="40" r="40" fill="#FFC107" />
+<circle cx="25" cy="30" r="5" fill="white" />
+<circle cx="55" cy="30" r="5" fill="white" />
+<path d="M 25 55 Q 40 65, 55 55" fill="none" stroke="white" stroke-width="4" />
+</svg>`;
+
+/**
+ * Default SVG avatar for the assistant.
+ * @type {string}
+ */
+const avatarPong = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80" width="80" height="80">
+<rect x="2" y="2" width="76" height="76" fill="#2196F3" />
+<circle cx="25" cy="30" r="5" fill="white" />
+<circle cx="55" cy="30" r="5" fill="white" />
+<rect x="15" y="50" width="50" height="5" fill="#ffffff" />
+<rect x="25" y="60" width="30" height="5" fill="#ffffff" />
+</svg>`;
+
+/**
+ * @typedef {import('../components/chatbox.js').ChatBox} ChatBox
+ * @typedef {import('../components/chatlog.js').Message} Message
+ */
+
+/**
+ * Plugin for handling avatars, allowing custom uploads via localStorage.
+ * @type {import('../hooks.js').Plugin}
+ */
+export const avatarsPlugin = {
+    name: 'avatars',
+    configService: null,
+
+    init: function(app) {
+        this.configService = app.configService;
+
+        // Bind all methods to this instance
+        Object.keys(this.hooks).forEach(hookName => {
+            this.hooks[hookName] = this.hooks[hookName].bind(this);
+        });
+    },
+
+    hooks: {
+        /**
+         * Renders the avatar for a message.
+         * @param {HTMLElement} el - The message element.
+         * @param {Message} message - The message object.
+         * @param {ChatBox} chatbox - The ChatBox instance.
+         */
+        onRenderMessage: function (el, message, chatbox) {
+            log(4, 'avatarsPlugin: Rendering avatar for role', message.value.role);
+            let type = 'ping'; // Default to user avatar type.
+            if (message.value.role === 'assistant') type = 'pong'; // Switch to assistant type if role is assistant.
+            const avatar = document.createElement('img');
+            let avatarSrc = this.configService.getItem(`${type}Avatar`);
+            const isCustom = !!avatarSrc; // Check if a custom avatar is set.
+            avatar.classList.add('avatar', 'clickable');
+            avatar.src = avatarSrc || `data:image/svg+xml,${encodeURIComponent(type === 'ping' ? avatarPing : avatarPong)}`;
+
+            avatar.addEventListener('click', () => {
+                log(5, 'avatarsPlugin: Avatar clicked for type', type);
+                if (isCustom) {
+                    log(4, 'avatarsPlugin: Resetting to default avatar for type', type);
+                    avatar.src = `data:image/svg+xml,${encodeURIComponent(type === 'ping' ? avatarPing : avatarPong)}`;
+                    this.configService.removeItem(`${type}Avatar`);
+                    chatbox.chatlog.clearCache();
+                    chatbox.update(false);
+                    return;
+                }
+                const input = document.createElement('input');
+                input.type = 'file';
+                input.accept = 'image/*';
+                input.addEventListener('change', () => {
+                    log(5, 'avatarsPlugin: File input changed');
+                    const file = input.files[0];
+                    if (!file) return;
+                    log(3, 'avatarsPlugin: Selected file', file.name, 'size:', file.size);
+                    if (!file.type.startsWith('image/')) {
+                        log(2, 'avatarsPlugin: Invalid file type', file.type);
+                        triggerError('Invalid file type. Please upload an image.');
+                        return;
+                    }
+                    if (file.size > 1024 * 1024 * 2) { // 2MB limit
+                        log(2, 'avatarsPlugin: File too large', file.size);
+                        triggerError('File too large. Maximum size is 2MB.');
+                        return;
+                    }
+                    // Read the file as Data URL.
+                    const reader = new FileReader();
+                    reader.addEventListener('load', () => {
+                        log(4, 'avatarsPlugin: File loaded successfully');
+                        this.configService.setItem(`${type}Avatar`, reader.result);
+                        avatar.src = reader.result;
+                        chatbox.chatlog.clearCache();
+                        chatbox.update(false);
+                    });
+                    reader.addEventListener('error', () => {
+                        log(1, 'avatarsPlugin: Failed to read file');
+                        triggerError('Failed to read avatar file.');
+                    });
+                    reader.readAsDataURL(file);
+                });
+                input.click();
+            });
+
+            el.insertAdjacentElement('afterbegin', avatar);
+        }
+    }
+};

js/plugins/error-bubble.js

@@ -0,0 +1,88 @@
+/**
+ * @fileoverview A plugin for displaying error messages in a bubble UI element.
+ */
+
+'use strict';
+
+import { log } from '../utils/logger.js';
+
+/**
+ * The timeout ID for the error bubble.
+ * @type {number|null}
+ */
+let timeoutId = null;
+
+/**
+ * Hides the error bubble.
+ */
+function hideBubble() {
+    log(5, 'errorBubblePlugin: Hiding error bubble');
+    const bubble = document.getElementById('error-bubble');
+    if (!bubble) return;
+    bubble.classList.add('hiding');
+    bubble.addEventListener('animationend', () => {
+        bubble.style.display = 'none';
+        bubble.classList.remove('hiding');
+        document.getElementById('error-bubble-content').innerHTML = '';
+    }, { once: true }); // One-time listener.
+}
+
+/**
+ * Plugin for displaying error messages in a bubble UI element.
+ * @type {import('../hooks.js').Plugin}
+ */
+export const errorBubblePlugin = {
+    name: 'error-bubble',
+    hooks: {
+        /**
+         * Displays an error message in the error bubble.
+         * @param {...*} args - The error arguments to display.
+         */
+        onError: function (...args) {
+            log(5, 'errorBubblePlugin: onError called with args', args);
+            if (args.length === 0) {
+                args = ['Unknown error'];
+            }
+            // Format each argument into a string for display.
+            const formattedParts = args.map(arg => {
+                if (arg instanceof Error) {
+                    return arg.message;
+                } else if (typeof arg === 'object' && arg !== null) {
+                    return JSON.stringify(arg, null, 2);
+                } else {
+                    return String(arg);
+                }
+            });
+            const bubble = document.getElementById('error-bubble');
+            if (!bubble) return;
+            const content = document.getElementById('error-bubble-content');
+            content.style.padding = '15px 5px 0 5px';
+            formattedParts.forEach(part => {
+                const messageEl = document.createElement('div');
+                messageEl.style.wordBreak = 'break-word';
+                messageEl.style.margin = '0 0 15px 0'; // Spacing between parts
+                messageEl.style.backgroundColor = '#772222a0';
+                messageEl.style.padding = '5px';
+                messageEl.style.borderRadius = '10px';
+                // Split the part into lines and create elements for each
+                const lines = part.split('\n');
+                lines.forEach((line, index) => {
+                    const lineEl = document.createElement('div');
+                    lineEl.textContent = line;
+                    lineEl.style.whiteSpace = 'pre-wrap';
+                    if (index < lines.length - 1) {
+                        lineEl.style.marginBottom = '10px';
+                    }
+                    messageEl.appendChild(lineEl);
+                });
+                content.appendChild(messageEl);
+            });
+            bubble.style.display = 'block';
+            bubble.classList.remove('hiding');
+            if (timeoutId) clearTimeout(timeoutId);
+            timeoutId = setTimeout(hideBubble, 20000);
+        }
+    }
+};
+
+document.getElementById('error-bubble-close').addEventListener('click', hideBubble);

js/plugins/formatting.js

@@ -0,0 +1,521 @@
+/**
+ * @fileoverview A collection of plugins for formatting message content.
+ */
+
+'use strict';
+
+import { triggerError, log } from '../utils/logger.js';
+
+/**
+ * @typedef {import('../hooks.js').Plugin} Plugin
+ */
+
+/**
+ * A collection of plugins for formatting message content.
+ * Each plugin applies transformations like SVG normalization, thinking tags, Markdown, KaTeX, and clip badges.
+ * @type {Plugin[]}
+ */
+export const formattingPlugins = [
+    {
+        name: 'svg_normalization',
+        hooks: {
+            /**
+             * Normalizes SVG content. Wraps SVGs in code blocks and fixes data URIs.
+             * @param {string} text - The text content to format.
+             * @param {int} pos - The position of the message.
+             * @returns {string} The formatted text.
+             */
+            onFormatContent: function (text, pos) {
+                log(5, 'formattingPlugins: svg_normalization onFormatContent called');
+                text = text.replace(/((?:```\w*?\s*?)|(?:<render_component[^>]*?>\s*?)|)(<svg[^>]*?>)([\s\S]*?)(<\/svg>(?:\s*?```|\s*?<\/render_component>|)|$)/gi,
+                    (match, prefix, svgStart, content, closing) => {
+                        let output = '```svg\n' + svgStart;
+                        if (closing?.startsWith('</svg>')) {
+                            output += content + '</svg>\n```';
+                        } else {
+                            // Incomplete: don't add </svg> or closing ```.
+                            output += content;
+                        }
+                        return output;
+                    }
+                );
+                text = text.replace(/\(data:image\/svg\+xml,([a-z0-9_"'%+-]+?)\)/gmi, (match, g1) => {
+                    let data = decodeURIComponent(g1);
+                    data = data.replace(/<svg\s/gmi, '<?xml version="1.0" encoding="UTF-8"?>\n<svg xmlns="http://www.w3.org/2000/svg" ');
+                    return `(data:image/svg+xml,${encodeURIComponent(data)})`;
+                });
+                return text;
+            }
+        }
+    },
+    {
+        name: 'preDetailsWrapper',
+        hooks: {
+            /**
+             * Wraps system prompt sections and tool calls in in special tags for later wrapping in <details> tags.
+             * @param {string} text - The text content to format.
+             * @param {int} pos - The position of the message.
+             * @returns {string} The formatted text.
+             */
+            onFormatContent: function (text, pos) {
+                // Wrap tool calls in special tags to be able to later wrap in <details>
+                text = text.replace(/<dma:tool_call[^>]+?name="([^>]*?)"[^>]*?(?:\/>|>[\s\S]*?<\/dma:tool_call\s*>)/gi, (match, name) => {
+                    const title = name ? name : '';
+                    return `\n-#--#- TOOL CALL -#--#- ${title.trim()} -#--#-\n\`\`\`html\n${match.trim()}\n\`\`\`\n-#--#- END TOOL CALL -#--#-\n`;
+                });
+                // Wrap tool responses in special tags to be able to later wrap in <details>
+                text = text.replace(/<dma:tool_response[^>]+?name="([^>]*?)"[^>]*?(?:\/>|>[\s\S]*?<\/dma:tool_response\s*>)/gi, (match, name) => {
+                    const title = name ? name : '';
+                    return `\n-#--#- TOOL RESPONSE -#--#- ${title.trim()} -#--#-\n\`\`\`html\n${match.trim()}\n\`\`\`\n-#--#- END TOOL RESPONSE -#--#-\n`;
+                });
+                return text;
+            }
+        }
+    },
+    {
+        name: 'markdown',
+        hooks: {
+            /**
+             * Renders Markdown using markdown-it and syntax highlighting with highlight.js.
+             * @param {string} text - The text content to format.
+             * @param {int} pos - The position of the message.
+             * @returns {string} The formatted text.
+             */
+            onFormatContent: function (text, pos) {
+                log(5, 'formattingPlugins: markdown onFormatContent called');
+                const mdSettings = {
+                    html: false, // Disable HTML tags in source.
+                    xhtmlOut: false, // Use '/' to close single tags (<br />).
+                    breaks: false, // Convert '\n' in paragraphs into <br>.
+                    langPrefix: 'language-', // CSS language prefix for fenced blocks.
+                    linkify: true, // Autoconvert URL-like text to links.
+                    typographer: false, // Enable some language-neutral replacement + quotes beautification.
+                    quotes: `""''`, // Double + single quotes replacement pairs.
+                    // Highlight function for code blocks.
+                    highlight: function (code, language) { // This needs to be a regular function, because arrow functions do not bind their own "this"-context and this.langPrefix would not be accessible.
+                        let value = '';
+                        try {
+                            if (language && hljs.getLanguage(language)) {
+                                value = hljs.highlight(code, { language, ignoreIllegals: true }).value;
+                            } else {
+                                const highlighted = hljs.highlightAuto(code);
+                                language = highlighted.language || 'unknown';
+                                value = highlighted.value;
+                            }
+                        } catch (error) {
+                            triggerError('Highlight error:', error, code);
+                        }
+                        return `<pre class="hljs ${this.langPrefix}${language}" data-plaintext="${encodeURIComponent(code.trim())}"><code>${value}</code></pre>`;
+                    }
+                };
+                const md = window.markdownit(mdSettings);
+                md.validateLink = link => !['javascript:', 'dma:'].some(prefix => link.startsWith(prefix));
+                return md.render(text);
+            }
+        }
+    },
+    {
+        name: 'think',
+        hooks: {
+            /**
+             * Handles <think> tags. Converts them to collapsible HTML details elements.
+             * @param {string} text - The text content to format.
+             * @param {int} pos - The position of the message.
+             * @returns {string} The formatted text.
+             */
+            onFormatContent: function (text, pos) {
+                log(5, 'formattingPlugins: think onFormatContent called');
+                text = text.replace(/&lt;think&gt;([\s\S]*?)&lt;\/think&gt;/g, '<details class="think"><summary>Thinking</summary><div class="think-content">$1</div></details>');
+                // Unmatched <think> at the end with open details.
+                text = text.replace(/&lt;think&gt;([\s\S]*)$/, '<details open class="think"><summary>Thinking</summary><div class="think-content">$1</div></details>');
+                return text;
+            }
+        }
+    },
+    {
+        name: 'detailsWrapper',
+        hooks: {
+            /**
+             * Wraps system prompt sections and tool calls in <details> tags.
+             * @param {string} text - The text content to format.
+             * @param {int} pos - The position of the message.
+             * @returns {string} The formatted text.
+             */
+            onFormatContent: function (text, pos) {
+                log(5, 'formattingPlugins: detailsWrapper onFormatContent called');
+                // Wrap system prompt sections in <details>
+                text = text.replace(/<p>--- (.*?) ---(?:<\/p>|\n)([\s\S]*?)(?:<p>|\n)--- END \1 ---<\/p>/g, (match, title, content) => {
+                    return `<details class="system-prompt-section"><summary>${title}</summary><div class="system-prompt-content"><p>--- ${title} ---</p>${content}<p>--- END ${title} ---</p></div></details>`;
+                });
+
+                const open = (pos === 0) ? ' open' : '';
+                // Wrap tool calls in <details>
+                text = text.replace(/-#--#- TOOL CALL -#--#- (.*?) -#--#-<\/p>([\s\S]*?)<p>-#--#- END TOOL CALL -#--#-/g, (match, name, content) => {
+                    const title = name ? ': ' + name : '';
+                    return `<details${open} class="tool-call"><summary>Tool Call${title}</summary>${content}</details>`;
+                });
+                // Wrap tool responses in <details>
+                text = text.replace(/-#--#- TOOL RESPONSE -#--#- (.*?) -#--#-<\/p>([\s\S]*?)<p>-#--#- END TOOL RESPONSE -#--#-/g, (match, name, content) => {
+                    const title = name ? ': ' + name : '';
+                    return `<details${open} class="tool-response"><summary>Tool Response${title}</summary>${content}</details>`;
+                });
+
+                return text;
+            }
+        }
+    },
+    {
+        name: 'katex',
+        hooks: {
+            /**
+             * Renders LaTeX math with KaTeX.
+             * @param {HTMLElement} wrapper - The wrapper element containing the content.
+             */
+            onPostFormatContent: function (wrapper) {
+                log(5, 'formattingPlugins: katex onPostFormatContent called');
+                const origFormulas = [];
+                const ktSettings = {
+                    delimiters: [
+                        { left: '$$  ', right: '  $$', display: true },
+                        { left: '$', right: '$', display: false },
+                        { left: '\$$  ', right: '\  $$', display: true }
+                    ],
+                    ignoredTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code', 'option', 'table', 'svg'],
+                    throwOnError: false,
+                    preProcess: math => {
+                        origFormulas.push(math);
+                        return math;
+                    }
+                };
+                renderMathInElement(wrapper, ktSettings);
+                wrapper.querySelectorAll('.katex').forEach((elem, i) => {
+                    if (i >= origFormulas.length) return;
+                    const formula = elem.parentElement;
+                    if (formula.classList.contains('katex-display')) {
+                        const div = document.createElement('div');
+                        div.classList.add('hljs', 'language-latex');
+                        div.dataset.plaintext = encodeURIComponent(origFormulas[i].trim());
+                        const pe = formula.parentElement;
+                        pe.insertBefore(div, formula);
+                        div.appendChild(formula);
+                    }
+                });
+            }
+        }
+    },
+    {
+        name: 'clipbadge',
+        hooks: {
+            /**
+             * Adds copy-to-clipboard badges to code blocks and tables.
+             * @param {HTMLElement} el - The message element.
+             * @param {import('../components/chatlog.js').Message} message - The message object.
+             */
+            onRenderMessage: function (el, message) {
+                log(5, 'formattingPlugins: clipbadge onRenderMessage called');
+                el.classList.add('hljs-nobg', 'hljs-message');
+                el.dataset.plaintext = encodeURIComponent(message.value.content.trim());
+                const tableToCSV = (table) => {
+                    const separator = ';';
+                    const rows = table.querySelectorAll('tr');
+                    return Array.from(rows).map(row =>
+                        Array.from(row.querySelectorAll('td, th')).map(col =>
+                            `"${col.innerText.replace(/(\r\n|\n|\r)/gm, '').replace(/(\s\s)/gm, ' ').replace(/"/g, '""')}"`
+                        ).join(separator)
+                    ).join('\n');
+                };
+                el.querySelectorAll('table').forEach(table => {
+                    const div = document.createElement('div');
+                    div.classList.add('hljs-nobg', 'hljs-table', 'language-table');
+                    div.dataset.plaintext = encodeURIComponent(tableToCSV(table));
+                    const pe = table.parentElement;
+                    pe.insertBefore(div, table);
+                    div.appendChild(table);
+                });
+                const clipBadge = new ClipBadge({ autoRun: false });
+                clipBadge.addTo(el);
+            }
+        }
+    }
+];
+/**
+ * @class ClipBadge
+ * Provides copy-to-clipboard badges for code blocks and tables.
+ * It is a heavily modified version of this:
+ * https://unpkg.com/highlightjs-badge@0.1.9/highlightjs-badge.js
+ *
+ * Use like this:
+ *
+ * const cb = new ClipBadge({
+ * templateSelector: '#my-badge-template',
+ * contentSelector: '#my-clip-snippets',
+ * autoRun: true,
+ * copyIconClass: 'fa fa-copy',
+ * copyIconContent: ' Copy',
+ * checkIconClass: 'fa fa-check text-success',
+ * checkIconContent: ' Copied!',
+ * onBeforeCodeCopied: (text, code) => {
+ * // Modify the text or code element before copying
+ * return text;
+ * },
+ * codeButtonContent: 'Code',
+ * imageButtonContent: 'Image'
+ * });
+ */
+class ClipBadge {
+    /**
+     * @param {Object} [options={}] - The options for the clip badge.
+     */
+    constructor(options = {}) {
+        this.settings = { ...this.defaults, ...options };
+        log(5, 'ClipBadge: Constructor called with options', options);
+        if (document.readyState === 'loading') {
+            document.addEventListener('DOMContentLoaded', () => this.init());
+        } else {
+            this.init();
+        }
+    }
+    defaults = {
+        templateSelector: '#clip-badge-template',
+        contentSelector: 'body',
+        autoRun: true,
+        copyIconClass: '',
+        copyIconContent: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M2 4a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v4h4a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H10a2 2 0 0 1-2-2v-4H4a2 2 0 0 1-2-2V4zm8 12v4h10V10h-4v4a2 2 0 0 1-2 2h-4zm4-2V4H4v10h10z" fill="currentColor"/></svg>',
+        checkIconClass: 'text-success',
+        checkIconContent: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20.664 5.253a1 1 0 0 1 .083 1.411l-10.666 12a1 1 0 0 1-1.495 0l-5.333-6a1 1 0 0 1 1.494-1.328l4.586 5.159 9.92-11.16a1 1 0 0 1 1.411-.082z" fill="currentColor"/></svg>&nbsp;Copied!',
+        onBeforeCodeCopied: null,
+        codeButtonContent: 'Code',
+        imageButtonContent: 'Image'
+    };
+    /**
+     * Initializes the ClipBadge by appending styles and template.
+     */
+    init() {
+        log(4, 'ClipBadge: init called');
+        const node = this.getTemplate();
+        document.head.appendChild(node.content.querySelector('style').cloneNode(true));
+        this.settings.template = node.content.querySelector('.clip-badge').cloneNode(true);
+        if (this.settings.autoRun) this.addAll();
+    }
+    /**
+     * Adds badges to all highlighted elements in the content selector.
+     */
+    addAll() {
+        log(5, 'ClipBadge: addAll called');
+        const content = document.querySelector(this.settings.contentSelector);
+        content.querySelectorAll('.hljs, .hljs-nobg').forEach(el => this.addBadge(el));
+    }
+    /**
+     * Adds badges to highlighted elements within a specific container.
+     * @param {HTMLElement} container - The container to add badges to.
+     */
+    addTo(container) {
+        log(5, 'ClipBadge: addTo called for container', container);
+        container.querySelectorAll('.hljs, .hljs-nobg').forEach(el => this.addBadge(el));
+        if (container.classList.contains('hljs') || container.classList.contains('hljs-nobg')) this.addBadge(container);
+    }
+    /**
+     * Adds a copy badge to a highlighted element.
+     * @param {HTMLElement} highlightEl - The element to add the badge to.
+     */
+    addBadge(highlightEl) {
+        log(5, 'ClipBadge: addBadge called for element', highlightEl);
+        if (highlightEl.classList.contains('clip-badge-pre')) return;
+        highlightEl.classList.add('clip-badge-pre');
+        const badge = this.createBadgeElement(highlightEl);
+        highlightEl.insertAdjacentElement('afterbegin', badge);
+    }
+    /**
+     * Creates the badge element.
+     * @param {HTMLElement} highlightEl - The highlighted element.
+     * @returns {HTMLElement} The badge element.
+     */
+    createBadgeElement(highlightEl) {
+        const plainText = decodeURIComponent(highlightEl.dataset.plaintext) || highlightEl.textContent;
+        let language = highlightEl.className.match(/\blanguage-(?<lang>[a-z0-9_-]+)\b/i)?.groups?.lang || 'unknown';
+        let svgText = '';
+        let htmlText = '';
+        if (language.toLowerCase() === 'svg' && plainText) {
+            svgText = highlightEl.innerHTML;
+            highlightEl.innerHTML = plainText;
+        } else if (language === 'table') {
+            language = '';
+            htmlText = highlightEl.innerHTML;
+        }
+        if (highlightEl.classList.contains('hljs-message')) {
+            language = '';
+            const right = highlightEl.querySelector('small > span > span.right');
+            if (right) {
+                language = right.textContent;
+                right.remove();
+            }
+        }
+        const badge = this.settings.template.cloneNode(true);
+        badge.classList.add('clip-badge');
+        badge.querySelector('.clip-badge-language').textContent = language;
+        if (svgText) {
+            this.handleSvg(badge, highlightEl, plainText, svgText);
+        }
+        this.handleCopy(badge, highlightEl, plainText, htmlText);
+        return badge;
+    }
+    /**
+     * Handles the logic for SVG code blocks.
+     * @param {HTMLElement} badge - The badge element.
+     * @param {HTMLElement} highlightEl - The highlighted element.
+     * @param {string} plainText - The plain text content.
+     * @param {string} svgText - The SVG text content.
+     */
+    handleSvg(badge, highlightEl, plainText, svgText) {
+        const swapBtn = badge.querySelector('.clip-badge-swap');
+        swapBtn.classList.add('clip-badge-swap-enabled');
+        swapBtn.dataset.showing = 'html';
+        swapBtn.innerHTML = this.settings.codeButtonContent;
+        swapBtn.addEventListener('click', () => {
+            log(5, 'ClipBadge: Swap button clicked, current showing', swapBtn.dataset.showing);
+            if (swapBtn.dataset.showing === 'html') {
+                swapBtn.dataset.showing = 'text';
+                swapBtn.innerHTML = this.settings.imageButtonContent;
+                highlightEl.innerHTML = svgText;
+            } else {
+                swapBtn.dataset.showing = 'html';
+                swapBtn.innerHTML = this.settings.codeButtonContent;
+                highlightEl.innerHTML = plainText;
+            }
+            highlightEl.insertAdjacentElement('afterbegin', badge);
+        });
+    }
+    /**
+     * Handles the copy to clipboard logic.
+     * @param {HTMLElement} badge - The badge element.
+     * @param {HTMLElement} highlightEl - The highlighted element.
+     * @param {string} plainText - The plain text content.
+     * @param {string} htmlText - The HTML text content.
+     */
+    handleCopy(badge, highlightEl, plainText, htmlText) {
+        const copyIcon = badge.querySelector('.clip-badge-copy-icon');
+        copyIcon.className = this.settings.copyIconClass;
+        copyIcon.classList.add('clip-badge-copy-icon');
+        copyIcon.innerHTML = this.settings.copyIconContent;
+        copyIcon.addEventListener('click', event => {
+            log(5, 'ClipBadge: Copy icon clicked');
+            event.preventDefault();
+            event.stopPropagation();
+            if (copyIcon.classList.contains('text-success')) return;
+            let textToCopy = plainText;
+            if (this.settings.onBeforeCodeCopied) {
+                textToCopy = this.settings.onBeforeCodeCopied(plainText, highlightEl);
+            }
+            const setCopied = () => {
+                copyIcon.className = this.settings.checkIconClass;
+                copyIcon.classList.add('clip-badge-copy-icon');
+                copyIcon.innerHTML = this.settings.checkIconContent;
+                setTimeout(() => {
+                    copyIcon.className = this.settings.copyIconClass;
+                    copyIcon.classList.add('clip-badge-copy-icon');
+                    copyIcon.innerHTML = this.settings.copyIconContent;
+                }, 2000);
+            };
+            if (navigator.clipboard?.write) {
+                const clipboardData = { 'text/plain': new Blob([textToCopy], { type: 'text/plain' }) };
+                if (htmlText) clipboardData['text/html'] = new Blob([htmlText], { type: 'text/html' });
+                navigator.clipboard.write([new ClipboardItem(clipboardData)]).then(setCopied).catch(err => {
+                    log(1, 'ClipBadge: Clipboard API failed', err);
+                    triggerError('Clipboard API failed:', err);
+                });
+            } else {
+                const textArea = document.createElement('textarea');
+                textArea.value = textToCopy;
+                textArea.style.position = 'fixed';
+                textArea.style.top = '0';
+                textArea.style.left = '0';
+                document.body.appendChild(textArea);
+                textArea.focus();
+                textArea.select();
+                try {
+                    if (document.execCommand('copy')) setCopied();
+                    else {
+                        log(1, 'ClipBadge: Fallback copy failed');
+                        triggerError('Fallback copy failed.');
+                    }
+                } catch (err) {
+                    log(1, 'ClipBadge: Fallback copy error', err);
+                    triggerError('Fallback copy error:', err);
+                }
+                document.body.removeChild(textArea);
+            }
+        });
+    }
+    /**
+     * Retrieves the badge template from the DOM or creates a default one.
+     * @returns {HTMLTemplateElement} The template element.
+     */
+    getTemplate() {
+        log(5, 'ClipBadge: getTemplate called');
+        let node = document.querySelector(this.settings.templateSelector);
+        if (!node) {
+            node = document.createElement('template');
+            node.innerHTML = `
+<style>
+.clip-badge-pre { position: relative; }
+@media print { .clip-badge { display: none; } }
+.clip-badge {
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: flex-start;
+    white-space: normal;
+    color: white;
+    font-size: 12px;
+    opacity: 0.3;
+    transition: opacity linear 0.4s;
+    position: absolute;
+    right: 0;
+    top: 0;
+}
+.hljs-message > .clip-badge { border-radius: 0 16px 0 7px; }
+.clip-badge.active { opacity: 0.8; }
+.clip-badge:hover { opacity: .95; }
+.clip-badge a, .clip-badge a:hover { text-decoration: none; }
+.clip-badge-language {
+    margin-right: 10px;
+    margin-top: 2px;
+    font-weight: 600;
+    color: goldenrod;
+}
+.hljs-message > div > div.clip-badge-language {
+    color: white;
+    font-weight: 200;
+}
+.clip-badge-copy-icon {
+    height: 1.2em;
+    font-size: 1em;
+    cursor: pointer;
+    padding: 5px 8px;
+    user-select: none;
+    background: #444;
+    border-radius: 0 5px 0 7px;
+}
+.hljs-message > div > div.clip-badge-copy-icon { border-radius: 0 16px 0 7px; }
+.hljs-table > div > div.clip-badge-copy-icon { border-radius: 0 4px 0 7px; }
+.clip-badge-copy-icon * { cursor: pointer; vertical-align: top; }
+.text-success { color: limegreen !important; }
+.clip-badge-swap {
+    cursor: pointer;
+    background: #444;
+    border-radius: 0 0 7px 7px;
+    padding: 0 7px 3px;
+    margin-right: 5px;
+    display: none;
+}
+.clip-badge-swap-enabled { display: block; }
+</style>
+<div class="clip-badge">
+    <div class="clip-badge-language"></div>
+    <div class="clip-badge-swap" title="Swap view"></div>
+    <div class="clip-badge-copy-icon" title="Copy to clipboard"></div>
+</div>
+`;
+        }
+        return node;
+    }
+}

js/plugins/maximize-view.js

@@ -0,0 +1,28 @@
+'use strict';
+
+const maximizePlugin = {
+    name: 'maximize',
+    init: function(app) {
+        const maximizeButton = document.createElement('button');
+        maximizeButton.id = 'maximize-button';
+        maximizeButton.classList.add('toolButton');
+        maximizeButton.title = 'Maximize';
+        // SVG for maximize icon
+        maximizeButton.innerHTML = `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 8V4h4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M20 8V4h-4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M4 16v4h4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M20 16v4h-4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>`;
+
+        const tabButtons = document.getElementById('tab-buttons');
+        tabButtons.appendChild(maximizeButton);
+
+        maximizeButton.addEventListener('click', () => {
+            document.body.classList.toggle('maximized-view');
+            const isMaximized = document.body.classList.contains('maximized-view');
+            maximizeButton.title = isMaximized ? 'Restore' : 'Maximize';
+            // SVG for restore icon
+            maximizeButton.innerHTML = isMaximized
+                ? `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M8 4v4H4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M16 4v4h4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M8 20v-4H4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M16 20v-4h4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>`
+                : `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4 8V4h4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M20 8V4h-4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M4 16v4h4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M20 16v4h-4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>`;
+        });
+    }
+};
+
+export { maximizePlugin };

js/plugins/mcp.js

@@ -0,0 +1,453 @@
+/**
+ * @fileoverview Plugin for MCP (Model Context Protocol) integration.
+ */
+
+'use strict';
+
+import { log } from '../utils/logger.js';
+import { hooks } from '../hooks.js';
+import { processToolCalls } from '../utils/shared.js';
+
+
+/**
+ * The header for the tools section in the system prompt.
+ * @type {string}
+ */
+const toolsHeader = `### MCP Tools:
+
+You can use tool calls. Make sure to follow the following XML-inspired format:
+<dma:tool_call name="example_tool_name">
+<parameter name="example_arg_name1">
+example_arg_value1
+</parameter>
+<parameter name="example_arg_name2">
+example_arg_value2
+</parameter>
+</dma:tool_call>
+Do not escape any of the tool call arguments. The arguments will be parsed as normal text. There is one exception: If you need to write </dma:tool_call> or </parameter> as value inside a <parameter>, write it like <\/dma:tool_call> or <\/parameter>.
+
+You can use multiple tools in one message, but either use tools or write an answer in a message. Use tools only if you need them.
+
+IMPORTANT: Write files only if explicitely instructed to do so.
+
+#### Available Tools:\n\n`;
+
+/**
+ * @typedef {import('../hooks.js').Plugin} Plugin
+ */
+
+/**
+ * Plugin for MCP (Model Context Protocol) integration, handling tools and citations.
+ * @type {Plugin}
+ */
+export const mcpPlugin = {
+    name: 'mcp',
+    configService: null,
+    mcpUrl: null,
+    mcpSessionId: null,
+    cachedToolsSection: '',
+    isInitialized: false,
+    initPromise: null,
+
+    init: function(app) {
+        this.configService = app.configService;
+
+        // Bind all methods to this instance
+        Object.keys(this.hooks).forEach(hookName => {
+            this.hooks[hookName] = this.hooks[hookName].bind(this);
+        });
+        this.filterMcpCalls = this.filterMcpCalls.bind(this);
+        this.executeMcpCall = this.executeMcpCall.bind(this);
+        this.generateToolsSection = this.generateToolsSection.bind(this);
+        this.initMcpSession = this.initMcpSession.bind(this);
+        this.sendMcpRequest = this.sendMcpRequest.bind(this);
+        this.mcpJsonRpc = this.mcpJsonRpc.bind(this);
+        this.continueInit = this.continueInit.bind(this);
+
+        this.mcpUrl = this.configService.getItem('mcpServer');
+
+        if (!this.mcpUrl) {
+            // Attempt to get from the fetched /api/config
+            fetch('/api/config').then(response => response.json()).then(config => {
+                if (config.mcp_endpoint) {
+                    this.mcpUrl = config.mcp_endpoint;
+                    this.configService.setItem('mcpServer', this.mcpUrl);
+                    this.continueInit();
+                }
+            }).catch(error => log(2, 'mcpPlugin: Could not fetch /api/config', error));
+        } else {
+            this.continueInit();
+        }
+    },
+
+    continueInit: function() {
+        if (!this.mcpUrl) return;
+        this.mcpSessionId = this.configService.getItem(`mcpSession_${this.mcpUrl}`) || null;
+        if (!this.cachedToolsSection) {
+            log(4, 'mcpPlugin: Pre-fetching tools from MCP', this.mcpUrl);
+            this.mcpJsonRpc('tools/list').then(response => {
+                const toolsArray = Array.isArray(response.tools) ? response.tools : [];
+                this.cachedToolsSection = this.generateToolsSection(toolsArray);
+                log(3, 'mcpPlugin: Tools section cached successfully');
+            }).catch(error => {
+                log(1, 'mcpPlugin: Failed to pre-fetch tools', error);
+                this.cachedToolsSection = '';
+            });
+        }
+    },
+
+    hooks: {
+        /**
+         * Renders a settings input for the MCP server URL.
+         * @param {HTMLElement} settingsEl - The settings element.
+         */
+        onSettingsRender: function (settingsEl) {
+            log(5, 'mcpPlugin: onSettingsRender called');
+            if (settingsEl.querySelector('#mcpServer')) return;
+            const p = document.createElement('p');
+            const label = document.createElement('label');
+            label.style = 'margin-top: 16px; margin-bottom: 4px; margin-left: 4px; display: block;';
+            label.htmlFor = 'mcpServer';
+            label.textContent = 'MCP Server URL';
+            const input = document.createElement('input');
+            input.type = 'text';
+            input.id = 'mcpServer';
+            input.placeholder = 'e.g., http://localhost:3000/mcp';
+            input.value = this.configService.getItem('mcpServer', '');
+            input.addEventListener('input', () => this.configService.setItem('mcpServer', input.value));
+            p.appendChild(label);
+            p.appendChild(input);
+            settingsEl.appendChild(p);
+        },
+        /**
+         * Appends tool descriptions to the system prompt before API calls if MCP is configured.
+         * @param {Object} payload - The API payload.
+         * @param {import('../components/chatbox.js').ChatBox} chatbox - The ChatBox instance.
+         * @returns {Object} The modified payload.
+         */
+        beforeApiCall: function (payload, chatbox) {
+            log(5, 'mcpPlugin: beforeApiCall called');
+            const mcpUrl = this.configService.getItem('mcpServer');
+
+            const systemMessage = chatbox.chatlog.getFirstMessage();
+            if (!systemMessage) return payload;
+
+            // Always remove the old tools section first
+            let content = systemMessage.value.content;
+            const originalContent = content;
+            content = content.replace(/\n\n\n--- MCP TOOLS ---\n[\s\S]*?\n--- END MCP TOOLS ---/g, ''); // Due to truncation, the ending \n is not always there.
+
+            // If MCP is configured and we have tools, add the new section
+            if (mcpUrl && this.cachedToolsSection) {
+                log(3, 'mcpPlugin: Adding tools section to system prompt');
+                content += '\n\n\n--- MCP TOOLS ---\n' + toolsHeader + this.cachedToolsSection + '\n--- END MCP TOOLS ---';
+            }
+
+            if (content !== originalContent) {
+                systemMessage.value.content = content;
+                systemMessage.cache = null;
+                chatbox.update();
+            }
+
+            return payload;
+        },
+        /**
+         * Processes completed assistant messages: parses tool calls, executes them via MCP,
+         * adds tool outputs to chatlog, and auto-continues the assistant response.
+         * @param {import('../components/chatlog.js').Message} message - The completed message.
+         * @param {import('../components/chatlog.js').Chatlog} chatlog - The chatlog.
+         * @param {import('../components/chatbox.js').ChatBox} chatbox - The ChatBox instance.
+         */
+        onMessageComplete: async function (message, chatlog, chatbox) {
+            if (!message.value || message.value.role !== 'assistant' || message !== chatlog.getLastMessage()) {
+                return;
+            }
+            const context = { message, plugin: this }; // Pass message for metadata updates
+            await processToolCalls(message, chatlog, chatbox, this.filterMcpCalls, this.executeMcpCall, context);
+        },
+        /**
+         * Replaces citation XML tags with HTML superscript links.
+         * @param {HTMLElement} wrapper - The wrapper element containing the content.
+         * @param {import('../components/chatlog.js').Message} message - The message object.
+         */
+        onPostFormatContent: function (wrapper, message) {
+            log(5, 'mcpPlugin: onPostFormatContent called');
+            wrapper.querySelectorAll('dma\\:render[type="render_inline_citation"]').forEach(node => {
+                const argNode = node.querySelector('argument[name="citation_id"]');
+                const id = argNode ? parseInt(argNode.textContent.trim()) : null;
+                if (!id) {
+                    log(2, 'mcpPlugin: Invalid citation_id, removing node');
+                    node.parentNode.removeChild(node);
+                    return;
+                }
+                const source = message.metadata?.sources?.[id - 1];
+                const sup = document.createElement('sup');
+                const a = document.createElement('a');
+                if (source) {
+                    a.href = source.url;
+                    a.title = source.title || 'Source';
+                } else {
+                    log(2, 'mcpPlugin: Citation not found for id', id);
+                    a.title = 'Citation not found';
+                    a.style.color = 'red';
+                }
+                a.textContent = `[${id}]`;
+                sup.appendChild(a);
+                node.parentNode.replaceChild(sup, node);
+            });
+        },
+        /**
+         * Clears the MCP server API endpoint.
+         * @param {HTMLElement} settingsEl - The settings element.
+         */
+        onLogout: function (settingsEl) {
+            const mcpSettings = settingsEl.querySelector('#mcpServer');
+            if (!mcpSettings) return;
+            mcpSettings.value = '';
+        }
+    },
+
+    filterMcpCalls: function(call) {
+        // In this context, any non-agent call is considered an MCP call.
+        return !call.name.endsWith('_agent');
+    },
+
+    executeMcpCall: async function(call, context) {
+        const { message } = context;
+        log(4, 'mcpPlugin: Executing tool', call.name, 'with params', call.params);
+        try {
+            const result = await this.mcpJsonRpc('tools/call', { name: call.name, arguments: call.params });
+
+            // Add sources to metadata for certain tools
+            if (call.name === 'web_search' || call.name === 'browse_page' || call.name.startsWith('x_')) {
+                message.metadata = { ...message.metadata || {}, sources: result.sources || [] };
+                log(4, 'mcpPlugin: Added sources to metadata', result.sources?.length || 0);
+            }
+
+            let content = '';
+            let error = null;
+
+            if (result.isError) {
+                if (result.content && Array.isArray(result.content)) {
+                    content = result.content.map(part => part.type === 'text' ? part.text : '').filter(t => t).join('\n');
+                }
+                error = content || 'Unknown error';
+                content = null;
+            } else {
+                if (result.content && Array.isArray(result.content)) {
+                    content = result.content.map(part => part.type === 'text' ? part.text : '').filter(t => t).join('\n');
+                } else if (result.structuredContent) {
+                    content = JSON.stringify(result.structuredContent);
+                } else {
+                    content = JSON.stringify(result);
+                }
+                if (result.sources && result.sources.length > 0) {
+                    content += '\n\nReferences:\n' + result.sources.map((s, i) => `[${i + 1}] ${s.title || 'Source'} - ${s.url}`).join('\n');
+                }
+            }
+            return { id: call.id, content, error };
+        } catch (err) {
+            log(1, 'mcpPlugin: Tool execution error', err);
+            return { id: call.id, content: null, error: err.message || 'Unknown error' };
+        }
+    },
+
+    /**
+     * Generates the tools Markdown section from a list of tools.
+     * @param {Object[]} tools - The list of tools.
+     * @returns {string} The Markdown section.
+     */
+    generateToolsSection: function(tools) {
+        const sections = [];
+        tools.forEach((tool, idx) => {
+            const desc = tool.description || 'No description provided.';
+            const action = tool.name;
+            const displayName = action.split('_').map(word => word.charAt(0).toUpperCase() + word.slice(1)).join(' ');
+            let argsStr = '';
+            const properties = tool.inputSchema?.properties || {};
+            const requiredSet = new Set(tool.inputSchema?.required || []);
+            Object.entries(properties).forEach(([name, arg]) => {
+                const argDesc = arg.description || arg.title || 'No description.';
+                const argType = arg.type || 'unknown';
+                const required = requiredSet.has(name) ? '(required)' : '(optional)';
+                const defaultStr = arg.default !== undefined ? ` (default: ${JSON.stringify(arg.default)})` : '';
+                argsStr += `   - \`${name}\`: ${argDesc} (type: ${argType})${required}${defaultStr}\n`;
+            });
+            const section = `${idx + 1}. **${displayName}**\n - **Description**: ${desc}\n - **Action** (dma:tool_call name): \`${action}\`\n - **Arguments** (parameter name): \n${argsStr}`;
+            sections.push(section);
+        });
+        return sections.join('\n');
+    },
+
+    /**
+     * Initializes the MCP session.
+     */
+    initMcpSession: async function() {
+        if (this.initPromise) return this.initPromise;
+        this.initPromise = (async () => {
+            if (this.isInitialized) return;
+            log(4, 'mcpPlugin: Initializing MCP session');
+            const initParams = {
+                protocolVersion: '2025-03-26', // Latest from spec; adjust if needed
+                capabilities: {
+                    roots: { listChanged: false }, // Minimal; add more if client supports
+                    sampling: {} // Declare if client uses sampling
+                },
+                clientInfo: {
+                    name: 'AIFlowChatClient',
+                    version: '1.0.0'
+                }
+            };
+            const initData = await this.sendMcpRequest('initialize', initParams, true); // No session for init
+            if (initData.protocolVersion !== '2025-03-26') {
+                throw new Error(`Protocol version mismatch: requested 2025-03-26, got ${initData.protocolVersion}`);
+            }
+            log(4, 'mcpPlugin: Negotiated capabilities', initData.capabilities);
+            // Check if session_id was set from header
+            if (!this.mcpSessionId) {
+                throw new Error('No session ID returned in initialize response header');
+            }
+            this.configService.setItem(`mcpSession_${this.mcpUrl}`, this.mcpSessionId);
+            // Send initialized notification
+            await this.sendMcpRequest('notifications/initialized', {}, false, true); // Notification: no id
+            this.isInitialized = true;
+            log(4, 'mcpPlugin: MCP session initialized', this.mcpSessionId);
+        })();
+        await this.initPromise;
+        this.initPromise = null; // Reset for future calls if needed
+    },
+
+    /**
+     * Sends a JSON-RPC request to the MCP server.
+     * @param {string} method - The JSON-RPC method.
+     * @param {Object} [params={}] - The JSON-RPC parameters.
+     * @param {boolean} [isInit=false] - Whether this is an initialization request.
+     * @param {boolean} [isNotification=false] - Whether this is a notification.
+     * @returns {Promise<Object|null>} The JSON-RPC result.
+     */
+    sendMcpRequest: async function(method, params = {}, isInit = false, isNotification = false) {
+        const url = this.configService.getItem('mcpServer');
+        if (!url) throw new Error('No MCP server URL set');
+        const body = {
+            jsonrpc: '2.0',
+            method,
+            params
+        };
+        if (!isNotification) {
+            body.id = Math.floor(Math.random() * 1000000);
+        }
+        const headers = {
+            'Content-Type': 'application/json',
+            'Accept': 'application/json, text/event-stream'
+        };
+        if (this.mcpSessionId && !isInit) {
+            headers['mcp-session-id'] = this.mcpSessionId;
+        }
+        const controller = new AbortController();
+        const timeoutId = setTimeout(() => controller.abort(), 30000); // 30s timeout
+        try {
+            const resp = await fetch(url, {
+                method: 'POST',
+                headers,
+                body: JSON.stringify(body),
+                signal: controller.signal
+            });
+            clearTimeout(timeoutId);
+            if (!resp.ok) {
+                const errorText = await resp.text();
+                log(1, 'mcpPlugin: MCP response not ok', resp.status, resp.statusText, errorText);
+                throw new Error(`MCP error: ${resp.statusText} - ${errorText}`);
+            }
+            const respHeaders = Object.fromEntries(resp.headers.entries());
+            log(5, 'mcpPlugin: Full response headers', respHeaders);
+            // Handle session_id from header if in response
+            const headerSession = resp.headers.get('mcp-session-id');
+            log(5, 'mcpPlugin: Checked mcp-session-id header', headerSession);
+            if (headerSession) {
+                this.mcpSessionId = headerSession;
+                this.configService.setItem(`mcpSession_${this.mcpUrl}`, this.mcpSessionId);
+            }
+            if (isNotification) {
+                // Notifications do not expect a response body or result
+                return null;
+            }
+            const contentType = resp.headers.get('Content-Type') || '';
+            if (contentType.includes('application/json')) {
+                const data = await resp.json();
+                if (data.error) {
+                    log(1, 'mcpPlugin: MCP JSON-RPC error', data.error);
+                    throw new Error(data.error.message || 'MCP call failed');
+                }
+                return data.result;
+            } else if (contentType.includes('text/event-stream')) {
+                // Parse SSE: Collect data from 'message' events
+                const reader = resp.body.getReader();
+                let buffer = '';
+                let result = null;
+                while (true) {
+                    const { done, value } = await reader.read();
+                    if (done) break;
+                    buffer += new TextDecoder().decode(value);
+                    const lines = buffer.split('\n');
+                    buffer = lines.pop(); // Last incomplete line
+                    for (const line of lines) {
+                        if (line.startsWith('event: message')) {
+                            // Next line should be data:
+                        } else if (line.startsWith('data: ')) {
+                            const dataStr = line.slice(6);
+                            try {
+                                const partial = JSON.parse(dataStr);
+                                if (partial.jsonrpc) {
+                                    result = partial.result; // Assume last message has full result
+                                }
+                            } catch {} // Ignore partial JSON
+                        }
+                    }
+                }
+                if (result) return result;
+                throw new Error('Invalid SSE response: No valid JSON-RPC result');
+            } else {
+                throw new Error(`Unexpected Content-Type: ${contentType}`);
+            }
+        } catch (error) {
+            clearTimeout(timeoutId);
+            if (error.name === 'AbortError') {
+                throw new Error('MCP request timed out');
+            }
+            throw error;
+        }
+    },
+
+    /**
+     * Performs a JSON-RPC call to the MCP server.
+     * @param {string} method - The JSON-RPC method.
+     * @param {Object} [params={}] - The JSON-RPC parameters.
+     * @param {boolean} [retry=false] - Whether to retry on session errors.
+     * @returns {Promise<Object>} The JSON-RPC result.
+     */
+    mcpJsonRpc: async function(method, params = {}, retry = false) {
+        log(5, 'mcpPlugin: mcpJsonRpc called with method', method, 'params', params);
+        try {
+            await this.initMcpSession(); // Ensure lifecycle is complete
+            const result = await this.sendMcpRequest(method, params);
+            log(4, 'mcpPlugin: MCP JSON-RPC success', result);
+            return result;
+        } catch (error) {
+            log(1, 'mcpPlugin: MCP JSON-RPC failure', error);
+            // Handle session-related errors by resetting and retrying once
+            if (error.message.includes('Missing session ID') || error.message.includes('No valid session ID') || error.message.includes('Invalid session ID')) {
+                this.configService.removeItem(`mcpSession_${this.mcpUrl}`);
+                this.mcpSessionId = null;
+                this.isInitialized = false;
+                if (!retry) {
+                    log(3, 'mcpPlugin: Retrying MCP call after session re-init');
+                    return this.mcpJsonRpc(method, params, true);
+                }
+            }
+            throw new AggregateError(
+                [error],
+                `Failed to perform MCP JSON-RPC call.\nURL: ${this.mcpUrl}, Method: ${method}, Params: ${JSON.stringify(params)}.\nOriginal error: ${error.message || 'Unknown'}.`
+            );
+        }
+    }
+};

js/plugins/model-params.js

@@ -0,0 +1,229 @@
+'use strict';
+
+import { log } from '../utils/logger.js';
+import { hooks } from '../hooks.js';
+
+// Helper function to get the correct storage for settings
+function getStorage(configService, chatService, chatId, agentId) {
+    if (agentId) {
+        const chat = chatService.chats.find(c => c.id === chatId);
+        const agent = chat?.agents?.find(a => a.id === agentId);
+        if (agent) {
+            if (!agent.modelSettings) agent.modelSettings = {};
+            return agent.modelSettings;
+        }
+    }
+    if (chatId) {
+        const chat = chatService.chats.find(c => c.id === chatId);
+        if (chat) {
+            if (!chat.modelSettings) chat.modelSettings = {};
+            return chat.modelSettings;
+        }
+    }
+    // For global settings, return the configService itself.
+    return configService;
+}
+
+function populateModelList(fieldset, idSuffix, currentModel, configService) {
+    // Clear existing model radio buttons, but keep the legend
+    const legend = fieldset.querySelector('legend');
+    fieldset.innerHTML = '';
+    if (legend) {
+        fieldset.appendChild(legend);
+    }
+
+    const models = JSON.parse(configService.getItem('models', '[]'));
+    models.forEach(model => {
+        const radio = document.createElement('input');
+        radio.type = 'radio';
+        radio.id = `${model.id}${idSuffix}`;
+        radio.name = `model${idSuffix}`;
+        radio.value = model.id;
+        const label = document.createElement('label');
+        label.htmlFor = `${model.id}${idSuffix}`;
+        label.textContent = model.id;
+        const modelRow = document.createElement('div');
+        modelRow.classList.add('model-list-row');
+        modelRow.appendChild(radio);
+        modelRow.appendChild(label);
+        fieldset.appendChild(modelRow);
+    });
+
+    if (models.length > 0 && currentModel) {
+        const modelRadio = fieldset.querySelector(`input[value="${currentModel}"]`);
+        if (modelRadio) modelRadio.checked = true;
+    }
+}
+
+
+export const modelParamsPlugin = {
+    id: 'model-params',
+    name: 'Model Parameters',
+    description: 'Manages model parameters (model, temperature, top_p, seed) and their UI.',
+    init: function(app) {
+        this.app = app;
+        this.configService = app.configService;
+        this.chatService = app.chatService;
+
+        // Bind 'this' for hooks that need access to the plugin instance
+        this.hooks.onModelSettingsRender = this.hooks.onModelSettingsRender.bind(this);
+        this.hooks.onModelSettingsChanged = this.hooks.onModelSettingsChanged.bind(this);
+        this.hooks.onGetModelSettings = this.hooks.onGetModelSettings.bind(this);
+        this.hooks.onUpdateModelSettings = this.hooks.onUpdateModelSettings.bind(this);
+    },
+    hooks: {
+        onModelSettingsRender: function(modelSettingsEl, modelSettings, chatId, agentId) {
+            const idSuffix = chatId ? `_${chatId}` : (agentId ? `_${agentId}` : '_global');
+            const containerId = `model-params-container${idSuffix}`;
+
+            // If the container already exists, just update the model list.
+            if (document.getElementById(containerId)) {
+                const fieldset = document.getElementById(`modelsFieldset${idSuffix}`);
+                if (fieldset) {
+                    populateModelList(fieldset, idSuffix, modelSettings.model, this.configService);
+                }
+                return;
+            }
+
+            const container = document.createElement('div');
+            container.id = containerId;
+            if (agentId) {
+                container.classList.add('agent-model-settings-group');
+            }
+            container.innerHTML = `
+                <fieldset id="modelsFieldset${idSuffix}" class="model-list-fieldset">
+                    <legend>Model&nbsp;<button id="refreshModelsButton${idSuffix}" title="Refresh models" class="toolButton small"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 5V1L7 6l5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z" fill="currentColor"/></svg></button></legend>
+                </fieldset>
+                <p>
+                    <label for="temperature${idSuffix}">Temperature</label>
+                    <button id="resetTemperature${idSuffix}" class="toolButton small" title="Reset temperature">&#x21BA;</button><br>
+                    <input type="range" id="temperature${idSuffix}" min="0" max="2.0" step="0.1">
+                    <span id="temperatureValue${idSuffix}"></span>
+                </p>
+                <p>
+                    <label for="topP${idSuffix}">Top-p (nucleus sampling)</label>
+                    <button id="resetTopP${idSuffix}" class="toolButton small" title="Reset Top-p">&#x21BA;</button><br>
+                    <input type="range" id="topP${idSuffix}" min="0" max="1.0" step="0.05">
+                    <span id="topPValue${idSuffix}"></span>
+                </p>
+                <p>
+                    <label for="seed${idSuffix}">Seed</label>
+                    <button id="resetSeed${idSuffix}" class="toolButton small" title="Reset seed">&#x21BA;</button><br>
+                    <input type="range" id="seed${idSuffix}" min="0" max="999999999" step="1">
+                    <span id="seedValue${idSuffix}"></span>
+                </p>
+            `;
+            modelSettingsEl.appendChild(container);
+
+            const ui = {
+                modelsFieldset: document.getElementById(`modelsFieldset${idSuffix}`),
+                refreshModelsButton: document.getElementById(`refreshModelsButton${idSuffix}`),
+                temperatureEl: document.getElementById(`temperature${idSuffix}`),
+                temperatureValue: document.getElementById(`temperatureValue${idSuffix}`),
+                topPEl: document.getElementById(`topP${idSuffix}`),
+                topPValue: document.getElementById(`topPValue${idSuffix}`),
+                seedEl: document.getElementById(`seed${idSuffix}`),
+                seedValue: document.getElementById(`seedValue${idSuffix}`),
+                resetTemperatureBtn: document.getElementById(`resetTemperature${idSuffix}`),
+                resetTopPBtn: document.getElementById(`resetTopP${idSuffix}`),
+                resetSeedBtn: document.getElementById(`resetSeed${idSuffix}`),
+            };
+
+            // Set initial values
+            ui.temperatureEl.value = modelSettings.temperature ?? 0.5;
+            ui.topPEl.value = modelSettings.top_p ?? 1.0;
+            ui.seedEl.value = modelSettings.seed ?? 0;
+
+            const updateSliderValues = () => {
+                ui.temperatureValue.textContent = ui.temperatureEl.value;
+                ui.topPValue.textContent = ui.topPEl.value;
+                ui.seedValue.textContent = ui.seedEl.value === '0' ? 'off' : ui.seedEl.value;
+            };
+
+            updateSliderValues();
+
+            populateModelList(ui.modelsFieldset, idSuffix, modelSettings.model, this.configService);
+
+            // Event Listeners
+            const changeHandler = () => {
+                const updatedSettings = {
+                    model: ui.modelsFieldset.querySelector(`input[name="model${idSuffix}"]:checked`)?.value,
+                    temperature: parseFloat(ui.temperatureEl.value),
+                    top_p: parseFloat(ui.topPEl.value),
+                    seed: ui.seedEl.value,
+                };
+                hooks.onModelSettingsChanged.forEach(fn => fn(modelSettingsEl, updatedSettings, chatId, agentId));
+            };
+
+            ui.modelsFieldset.addEventListener('change', changeHandler);
+            ui.temperatureEl.addEventListener('input', () => { updateSliderValues(); changeHandler(); });
+            ui.topPEl.addEventListener('input', () => { updateSliderValues(); changeHandler(); });
+            ui.seedEl.addEventListener('input', () => { updateSliderValues(); changeHandler(); });
+
+            ui.resetTemperatureBtn.addEventListener('click', () => { ui.temperatureEl.value = 0.5; updateSliderValues(); changeHandler(); });
+            ui.resetTopPBtn.addEventListener('click', () => { ui.topPEl.value = 1.0; updateSliderValues(); changeHandler(); });
+            ui.resetSeedBtn.addEventListener('click', () => { ui.seedEl.value = 0; updateSliderValues(); changeHandler(); });
+
+            // The global settings panel has the main refresh button
+            if (!chatId && !agentId) {
+                 ui.refreshModelsButton.addEventListener('click', () => this.app.loadModels());
+            } else {
+                ui.refreshModelsButton.style.display = 'none';
+            }
+        },
+
+        onModelSettings: (payload, modelSettings) => {
+            if (modelSettings.model) payload.model = modelSettings.model;
+            if (modelSettings.temperature != null) payload.temperature = modelSettings.temperature;
+            if (modelSettings.top_p != null) payload.top_p = modelSettings.top_p;
+            if (modelSettings.seed && modelSettings.seed !== '0') {
+                payload.seed = parseInt(modelSettings.seed, 10);
+            }
+        },
+
+        onGetModelSettings: function(settings) {
+            settings.model = this.configService.getItem('model', 1.0);
+            settings.temperature = parseFloat(this.configService.getItem('temperature', 0.5));
+            settings.top_p = parseFloat(this.configService.getItem('top_p', 1.0));
+            settings.seed = this.configService.getItem('seed', '0');
+        },
+
+        onUpdateModelSettings: function(key, value) {
+            if (key === 'model' || key === 'temperature' || key === 'top_p' || key === 'seed') {
+                this.configService.setItem(key, value);
+            }
+        },
+
+        onModelSettingsExport: (modelSettingsExport, modelSettings) => {
+            if (modelSettings.model) modelSettingsExport.model = modelSettings.model;
+            if (modelSettings.temperature != null) modelSettingsExport.temperature = modelSettings.temperature;
+            if (modelSettings.top_p != null) modelSettingsExport.top_p = modelSettings.top_p;
+            if (modelSettings.seed) modelSettingsExport.seed = modelSettings.seed;
+        },
+
+        onModelSettingsImport: (modelSettingsImport, modelSettings) => {
+            if (modelSettingsImport.model) modelSettings.model = modelSettingsImport.model;
+            if (modelSettingsImport.temperature != null) modelSettings.temperature = modelSettingsImport.temperature;
+            if (modelSettingsImport.top_p != null) modelSettings.top_p = modelSettingsImport.top_p;
+            if (modelSettingsImport.seed) modelSettings.seed = modelSettingsImport.seed;
+        },
+
+        onModelSettingsChanged: function(modelSettingsEl, updatedSettings, chatId, agentId) {
+            log(4, 'Model settings changed for', { chatId, agentId });
+            const storage = getStorage(this.configService, this.chatService, chatId, agentId);
+
+            if (chatId || agentId) {
+                // Chat or Agent scope: update properties directly on the object
+                Object.assign(storage, updatedSettings);
+                this.chatService.persistChats();
+            } else {
+                // Global scope: use the generic setItem on configService
+                Object.entries(updatedSettings).forEach(([key, value]) => {
+                    if (value !== undefined) {
+                        this.configService.setItem(key, value);
+                    }
+                });
+            }
+        },
+    }
+};

js/plugins/ui-controls.js

@@ -0,0 +1,154 @@
+/**
+ * @fileoverview A plugin for adding UI controls to messages.
+ */
+
+'use strict';
+
+import { triggerError, log } from '../utils/logger.js';
+import { createControlButton } from '../utils/ui.js';
+import { resetEditing, addAlternativeToChat } from '../utils/chat.js';
+import { hooks } from '../hooks.js';
+
+/**
+ * @typedef {import('../components/chatbox.js').ChatBox} ChatBox
+ * @typedef {import('../components/chatlog.js').Chatlog} Chatlog
+ * @typedef {import('../components/chatlog.js').Message} Message
+ */
+
+/**
+ * Plugin to add navigation controls for alternative messages.
+ * @type {import('../hooks.js').Plugin}
+ */
+export const alternativeNavigationPlugin = {
+    name: 'alternativeNavigation',
+    hooks: {
+        /**
+         * Renders navigation controls for alternative messages.
+         * @param {HTMLElement} container - The container for the controls.
+         * @param {Message} message - The message object.
+         * @param {Chatlog} chatlog - The chatlog instance.
+         */
+        onRenderMessageControls: function(container, message, chatlog) {
+            const alternatives = chatlog.findAlternativesForMessage(message);
+            if (!alternatives || alternatives.messages.length <= 1) return;
+
+            const prevBtn = createControlButton(
+                'Previous Message',
+                '<svg width="16" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M19 7.766c0-1.554-1.696-2.515-3.029-1.715l-7.056 4.234c-1.295.777-1.295 2.653 0 3.43l7.056 4.234c1.333.8 3.029-.16 3.029-1.715V7.766zM9.944 12L17 7.766v8.468L9.944 12zM6 6a1 1 0 0 1 1 1v10a1 1 0 1 1-2 0V7a1 1 0 0 1 1-1z" fill="currentColor"/></svg>',
+                () => chatlog.cycleAlternatives(message, 'prev')
+            );
+
+            const nextBtn = createControlButton(
+                'Next Message',
+                '<svg width="16" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5 7.766c0-1.554 1.696-2.515 3.029-1.715l7.056 4.234c1.295.777 1.295 2.653 0 3.43L8.03 17.949c-1.333.8-3.029-.16-3.029-1.715V7.766zM14.056 12L7 7.766v8.468L14.056 12zM18 6a1 1 0 0 1 1 1v10a1 1 0 1 1-2 0V7a1 1 0 0 1 1-1z" fill="currentColor"/></svg>',
+                () => chatlog.cycleAlternatives(message, 'next')
+            );
+
+            const status = document.createElement('span');
+            status.innerHTML = `&nbsp;${alternatives.activeMessageIndex + 1}/${alternatives.messages.length}&nbsp;`;
+
+            const spacer = document.createElement('span');
+            spacer.innerHTML = `&nbsp;&nbsp;&nbsp;`;
+
+            container.appendChild(spacer);
+            container.appendChild(prevBtn);
+            container.appendChild(status);
+            container.appendChild(nextBtn);
+        }
+    }
+};
+
+/**
+ * Plugin to add message modification controls (add, edit, delete).
+ * @type {import('../hooks.js').Plugin}
+ */
+export const messageModificationPlugin = {
+    name: 'messageModification',
+    hooks: {
+        /**
+         * Renders modification controls for a message.
+         * @param {HTMLElement} container - The container for the controls.
+         * @param {Message} message - The message object.
+         * @param {Chatlog} chatlog - The chatlog instance.
+         * @param {ChatBox} chatbox - The ChatBox instance.
+         */
+        onRenderMessageControls: function(container, message, chatlog, chatbox) {
+            const store = chatbox.store;
+            const ui = store.get('ui');
+            const messageInput = ui.messageEl;
+
+            const addBtn = createControlButton(
+                'New Message',
+                '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 4a1 1 0 0 1 1 1v6h6a1 1 0 1 1 0 2h-6v6a1 1 0 1 1-2 0v-6H5a1 1 0 1 1 0-2h6V5a1 1 0 0 1 1-1z" fill="currentColor"/></svg>',
+                () => {
+                    log(4, 'Add button clicked for message', message);
+                    resetEditing(store, chatlog, chatbox);
+                    if (message.value.role === 'assistant') {
+                        // Regenerate AI message
+                        addAlternativeToChat(chatlog, message, { role: message.value.role, content: null });
+                        hooks.onGenerateAIResponse.forEach(fn => fn({}, chatlog));
+                    } else {
+                        if (messageInput.value !== '' && messageInput.value !== message.value.content.trim()) {
+                            triggerError("Chat input is not empty.");
+                            return;
+                        }
+                        // Add a new editable alternative for user/system/tool messages with placeholder
+                        const pos = chatlog.getMessagePos(message);
+                        const originalContent = message.value.content;
+                        addAlternativeToChat(chatlog, message, { role: message.value.role, content: null });
+                        messageInput.value = originalContent ? originalContent.trim() : '';
+                        messageInput.dispatchEvent(new Event('input', { bubbles: true }));
+                        store.set('editingPos', pos);
+                        const roleRadio = document.getElementById(message.value.role);
+                        if (roleRadio) roleRadio.checked = true;
+                        messageInput.focus();
+                    }
+                }
+            );
+
+            const editBtn = createControlButton(
+                'Edit Message',
+                '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z" fill="currentColor"/></svg>',
+                () => {
+                    log(4, 'Edit button clicked for message', message);
+                    if (messageInput.value !== '' && messageInput.value !== message.value.content.trim()) {
+                        triggerError("Chat input is not empty.");
+                        return;
+                    }
+                    resetEditing(store, chatlog, chatbox);
+                    messageInput.value = message.value.content.trim();
+                    messageInput.dispatchEvent(new Event('input', { bubbles: true }));
+
+                    const pos = chatlog.getMessagePos(message);
+                    store.set('editingPos', pos);
+
+                    const roleRadio = document.getElementById(message.value.role);
+                    if (roleRadio) roleRadio.checked = true;
+
+                    const alternatives = chatlog.findAlternativesForMessage(message);
+                    message.cache = chatbox.formatMessage({ value: { role: message.value.role, content: '🤔...' } }, pos, alternatives.activeMessageIndex, alternatives.messages.length);
+                    chatbox.update(false);
+
+                    messageInput.focus();
+                }
+            );
+
+            const delBtn = createControlButton(
+                'Delete Message',
+                '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7 4a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v2h4a1 1 0 1 1 0 2h-1.069l-.867 12.142A2 2 0 0 1 17.069 22H6.93a2 2 0 0 1-1.995-1.858L4.07 8H3a1 1 0 0 1 0-2h4V4zm2 2h6V4H9v2zM6.074 8l.857 12H17.07l.857-12H6.074zM10 10a1 1 0 0 1 1 1v6a1 1 0 1 1-2 0v-6a1 1 0 0 1 1-1zm4 0a1 1 0 0 1 1 1v6a1 1 0 1 1-2 0v-6a1 1 0 0 1 1-1z" fill="currentColor"/></svg>',
+                () => {
+                    log(4, 'Delete button clicked for message', message);
+                    chatlog.deleteMessage(message);
+                }
+            );
+
+            const spacer = document.createElement('span');
+            spacer.innerHTML = `&nbsp;&nbsp;&nbsp;`;
+
+            container.appendChild(spacer);
+            container.appendChild(addBtn);
+            container.appendChild(editBtn);
+            container.appendChild(delBtn);
+        }
+    }
+};

js/services/api-service.js

@@ -0,0 +1,101 @@
+/**
+ * @fileoverview Service for handling all interactions with the OpenAI-compatible API.
+ */
+
+'use strict';
+
+import { log, triggerError } from '../utils/logger.js';
+
+/**
+ * @class ApiService
+ * Handles all interactions with the OpenAI-compatible API.
+ */
+class ApiService {
+    /**
+     * @param {import('../state/store.js').default} store - The application's state store.
+     */
+    constructor(store) {
+        this.store = store;
+    }
+
+    /**
+     * Fetches the list of available models from the API.
+     * @param {string} endpoint - The API endpoint URL.
+     * @param {string} apiKey - The user's API key.
+     * @returns {Promise<Array<Object>>} A promise that resolves to an array of model objects.
+     */
+    async getModels(endpoint, apiKey) {
+        log(3, 'ApiService: getModels called');
+        const modelsUrl = endpoint.replace(/\/chat\/completions$/, '/models');
+        try {
+            const headers = { 'Content-Type': 'application/json' };
+            if (apiKey) {
+                headers['Authorization'] = `Bearer ${apiKey}`;
+            }
+            const resp = await fetch(modelsUrl, {
+                method: 'GET',
+                headers
+            });
+            if (!resp.ok) {
+                throw new Error(`Failed to fetch models: ${resp.statusText} (${resp.status})`);
+            }
+            const data = await resp.json();
+            const models = (data.data || []).sort((a, b) => a.id.localeCompare(b.id));
+            return models;
+        } catch (err) {
+            log(1, 'ApiService: Failed to load models', err);
+            triggerError(`Failed to load models: ${err.message}`);
+            throw err;
+        }
+    }
+
+    /**
+     * Streams the API response for a given payload.
+     * @param {Object} payload - The payload to send to the API.
+     * @param {string} endpoint - The API endpoint URL.
+     * @param {string} apiKey - The user's API key.
+     * @param {AbortSignal} abortSignal - The abort signal to cancel the request.
+     * @returns {Promise<ReadableStreamDefaultReader>} A promise that resolves to a stream reader.
+     */
+    async streamAPIResponse(payload, endpoint, apiKey, abortSignal) {
+        log(4, 'ApiService: streamAPIResponse called with payload model', payload.model);
+        const headers = {
+            'Content-Type': 'application/json'
+        };
+        if (apiKey) {
+            headers['Authorization'] = `Bearer ${apiKey}`;
+        }
+
+        const response = await fetch(endpoint, {
+            signal: abortSignal,
+            method: 'POST',
+            headers,
+            body: JSON.stringify(payload)
+        });
+
+        if (!response.ok) {
+            log(1, 'ApiService: API response not ok', response.status, response.statusText);
+            const errorBody = await response.text();
+            let errorMessage = `API error: ${response.statusText} (${response.status})`;
+            if (errorBody) {
+                try {
+                    const errorJson = JSON.parse(errorBody);
+                    if (errorJson.error && errorJson.error.message) {
+                        errorMessage = errorJson.error.message;
+                    }
+                } catch (e) {
+                    // Not a json error, just use the text
+                    errorMessage = errorBody;
+                }
+            }
+             if (response.status === 401) {
+                errorMessage = 'Invalid API key. Please check your settings.';
+            }
+            throw new Error(errorMessage);
+        }
+
+        return response.body.getReader();
+    }
+}
+
+export default ApiService;

js/services/chat-service.js

@@ -0,0 +1,274 @@
+/**
+ * @fileoverview Service for managing chat sessions.
+ */
+
+'use strict';
+
+import { Chatlog, Alternatives } from '../components/chatlog.js';
+import { firstPrompt } from '../config.js';
+import { log, triggerError } from '../utils/logger.js';
+import { getDatePrompt, resetEditing, addMessageToChat } from '../utils/chat.js';
+import { hooks } from '../hooks.js';
+
+/**
+ * @class ChatService
+ * Manages chat sessions, including creating, switching, loading, and persisting chats.
+ */
+class ChatService {
+    /**
+     * @param {import('../state/store.js').default} store - The application's state store.
+     */
+    constructor(store, configService) {
+        this.store = store;
+        this.configService = configService;
+        this.chats = [];
+        this.currentChatId = null;
+    }
+
+    /**
+     * Initializes the chat service by loading chats from storage or creating a new one.
+     */
+    init() {
+        this.loadChats();
+        const initialId = this.currentChatId || this.chats[0]?.id;
+        if (this.chats.length === 0) {
+            this.createNewChat();
+        } else {
+            this.switchChat(initialId);
+        }
+
+        this.store.subscribe('currentChat', (chat) => {
+            if (chat) {
+                const index = this.chats.findIndex(c => c.id === chat.id);
+                if (index !== -1) {
+                    this.chats[index] = chat;
+                    this.persistChats();
+                }
+            }
+        });
+    }
+
+    /**
+     * Creates a new chat session.
+     * @returns {Object} The new chat object.
+     */
+    createNewChat() {
+        log(3, 'ChatService: createNewChat called');
+        const id = Date.now().toString();
+        const title = 'New Chat';
+        const chatlog = new Chatlog();
+        addMessageToChat(chatlog, { role: 'system', content: firstPrompt + getDatePrompt() });
+        const newChat = { id, title, chatlog, modelSettings: {}, agents: [], flow: { steps: [], connections: [] } };
+        this.chats.push(newChat);
+        this.store.set('chats', this.chats);
+        this.switchChat(id);
+        return newChat;
+    }
+
+    /**
+     * Switches the active chat session.
+     * @param {string} id - The ID of the chat to switch to.
+     */
+    switchChat(id) {
+        log(3, 'ChatService: switchChat called for id', id);
+        if (this.currentChatId === id) return;
+
+        const ui = this.store.get('ui');
+        resetEditing(this.store, ui.chatBox.chatlog, ui.chatBox);
+
+        this.persistChats();
+        this.currentChatId = id;
+        const currentChat = this.chats.find(c => c.id === id);
+        this.store.set('currentChat', currentChat);
+    }
+
+    /**
+     * Deletes a chat session.
+     * @param {string} chatId - The ID of the chat to delete.
+     */
+    deleteChat(chatId) {
+        log(4, 'ChatService: deleteChat called for', chatId);
+        this.chats = this.chats.filter(c => c.id !== chatId);
+        this.store.set('chats', this.chats);
+
+        if (this.currentChatId === chatId) {
+            if (this.chats.length > 0) {
+                this.switchChat(this.chats[0].id);
+            } else {
+                this.createNewChat();
+            }
+        }
+        this.persistChats();
+    }
+
+    /**
+     * Updates the title of a chat session.
+     * @param {string} chatId - The ID of the chat to update.
+     * @param {string} newTitle - The new title for the chat.
+     */
+    updateChatTitle(chatId, newTitle) {
+        const chat = this.chats.find(c => c.id === chatId);
+        if (chat) {
+            chat.title = newTitle.trim() || 'Untitled Chat';
+            this.persistChats();
+            this.store.set('chats', [...this.chats]);
+        }
+    }
+
+    /**
+     * Persists all chat sessions to local storage.
+     */
+    persistChats() {
+        log(5, 'ChatService: persistChats called');
+        const serializedChats = this.chats.map(c => {
+            const chatExport = {
+                id: c.id,
+                title: c.title,
+                data: c.chatlog.toJSON(),
+                modelSettings: {},
+                agents: (c.agents || []).map(agent => {
+                    const agentExport = { ...agent, modelSettings: {} };
+                    if (agent.modelSettings) {
+                        hooks.onModelSettingsExport.forEach(fn => fn(agentExport.modelSettings, agent.modelSettings));
+                    }
+                    return agentExport;
+                }),
+                flow: c.flow || { steps: [], connections: [] },
+            };
+            if (c.modelSettings) {
+                hooks.onModelSettingsExport.forEach(fn => fn(chatExport.modelSettings, c.modelSettings));
+            }
+            return chatExport;
+        });
+        this.configService.setItem('chats', JSON.stringify(serializedChats));
+        this.configService.setItem('currentChatId', this.currentChatId);
+    }
+
+    /**
+     * Loads chat sessions from local storage.
+     */
+    loadChats() {
+        log(3, 'ChatService: loadChats called');
+        const storedChats = this.configService.getItem('chats');
+        let migrated = false;
+        let legacyLoaded = false;
+        if (storedChats) {
+            const parsed = JSON.parse(storedChats);
+            this.chats = parsed.map(chatData => {
+                const chatlog = new Chatlog();
+                chatlog.load(chatData.data || null);
+
+                const modelSettings = {};
+                if (chatData.modelSettings) {
+                    hooks.onModelSettingsImport.forEach(fn => fn(chatData.modelSettings, modelSettings));
+                }
+
+                const agents = (chatData.agents || []).map(agentData => {
+                    const agentModelSettings = {};
+                    if (agentData.modelSettings) {
+                        hooks.onModelSettingsImport.forEach(fn => fn(agentData.modelSettings, agentModelSettings));
+                    }
+                    // Ensure useCustomModelSettings is carried over, default to false if not present
+                    const useCustom = agentData.useCustomModelSettings || false;
+                    return { ...agentData, modelSettings: agentModelSettings, useCustomModelSettings: useCustom };
+                });
+
+                const first = chatlog.getFirstMessage();
+                if (!first || first.value.role !== 'system') {
+                    log(4, 'ChatService: Adding missing system prompt in loadChats');
+                    const oldRoot = chatlog.rootAlternatives;
+                    chatlog.rootAlternatives = new Alternatives();
+                    const sysMsg = chatlog.rootAlternatives.addMessage({ role: 'system', content: firstPrompt + getDatePrompt() });
+                    sysMsg.answerAlternatives = oldRoot;
+                }
+                const flow = chatData.flow || { steps: [], connections: [] };
+                if (!flow.connections) flow.connections = [];
+                return { id: chatData.id, title: chatData.title, chatlog, modelSettings, agents, flow };
+            });
+        } else {
+            const oldChatlog = this.configService.getItem('chatlog');
+            if (oldChatlog) {
+                log(3, 'ChatService: Loading legacy chatlog');
+                const parsed = JSON.parse(oldChatlog);
+                let rootData;
+                if (parsed.rootAlternatives) {
+                    rootData = parsed.rootAlternatives;
+                } else {
+                    const tempLog = new Chatlog();
+                    parsed.forEach(msg => addMessageToChat(tempLog, msg));
+                    rootData = tempLog.toJSON();
+                }
+                const chatlog = new Chatlog();
+                chatlog.load(rootData);
+                this.chats = [{ id: Date.now().toString(), title: 'Legacy Chat', chatlog }];
+                this.configService.removeItem('chatlog');
+                legacyLoaded = true;
+            } else {
+                this.chats = [];
+            }
+        }
+        if (migrated || legacyLoaded) {
+            log(3, 'ChatService: Persisting migrated/legacy chats');
+            this.persistChats();
+        }
+        this.currentChatId = this.configService.getItem('currentChatId');
+        // Set 'currentChat' in store if currentChatId is valid, to select the first chat on page load if available
+        let currentChat = null;
+        if (this.currentChatId) {
+            currentChat = this.chats.find(c => c.id === this.currentChatId);
+        }
+        if (currentChat) {
+            this.store.set('currentChat', currentChat);
+        } else {
+            // Invalid ID; clear it so init() can fall back to first chat
+            this.currentChatId = null;
+        }
+        this.store.set('chats', this.chats);
+    }
+
+    /**
+     * Imports a chat from a JSON file content.
+     * @param {string} fileContent - The content of the JSON file.
+     */
+    importChat(fileContent) {
+        try {
+            let loaded = JSON.parse(fileContent);
+            let data = loaded.data;
+            if (!data && loaded.rootAlternatives) {
+                data = loaded.rootAlternatives;
+            } else if (!data && typeof loaded === 'object') {
+                data = loaded;
+            }
+            const chatlog = new Chatlog();
+            chatlog.load(data);
+            const id = Date.now().toString();
+            const title = loaded.title || 'Imported Chat';
+
+            const modelSettings = {};
+            if (loaded.modelSettings) {
+                hooks.onModelSettingsImport.forEach(fn => fn(loaded.modelSettings, modelSettings));
+            }
+
+            const agents = (loaded.agents || []).map(agentData => {
+                const agentModelSettings = {};
+                if (agentData.modelSettings) {
+                    hooks.onModelSettingsImport.forEach(fn => fn(agentData.modelSettings, agentModelSettings));
+                }
+                const useCustom = agentData.useCustomModelSettings || false;
+                return { ...agentData, modelSettings: agentModelSettings, useCustomModelSettings: useCustom };
+            });
+
+            const flow = loaded.flow || { steps: [], connections: [] };
+            if (!flow.connections) flow.connections = [];
+            this.chats.push({ id, title, chatlog, modelSettings, agents, flow });
+            this.store.set('chats', this.chats);
+            this.switchChat(id);
+            this.persistChats();
+        } catch (error) {
+            log(1, 'ChatService: Invalid chatlog file', error);
+            triggerError('Invalid chatlog file. Failed to parse loaded chatlog:', error);
+        }
+    }
+}
+
+export default ChatService;

js/services/config-service.js

@@ -0,0 +1,71 @@
+/**
+ * @fileoverview Service for managing application configuration.
+ */
+
+'use strict';
+
+import { defaultEndpoint } from '../config.js';
+import { log } from '../utils/logger.js';
+
+/**
+ * @class ConfigService
+ * Manages application configuration, such as API endpoint, key, and model.
+ */
+class ConfigService {
+    /**
+     * @param {import('../state/store.js').default} store - The application's state store.
+     */
+    constructor(store) {
+        this.store = store;
+    }
+
+    /**
+     * Gets an item from localStorage.
+     * @param {string} key - The key of the item.
+     * @param {*} defaultValue - The default value if the item doesn't exist.
+     * @returns {*} The value from localStorage or the default value.
+     */
+    getItem(key, defaultValue) {
+        const value = localStorage.getItem(`aiflow-chat_${key}`);
+        return value !== null ? value : defaultValue;
+    }
+
+    /**
+     * Sets an item in localStorage.
+     * @param {string} key - The key of the item.
+     * @param {*} value - The value to set.
+     */
+    setItem(key, value) {
+        localStorage.setItem(`aiflow-chat_${key}`, value);
+    }
+
+    /**
+     * Removes an item from localStorage.
+     * @param {string} key - The key of the item to remove.
+     */
+    removeItem(key) {
+        localStorage.removeItem(`aiflow-chat_${key}`);
+    }
+
+    /**
+     * Gets all model-related settings as an object by using hooks.
+     * @returns {Object} An object containing all model settings.
+     */
+    getModelSettings() {
+        const settings = {};
+        hooks.onGetModelSettings.forEach(fn => fn(settings));
+        return settings;
+    }
+
+    /**
+     * Updates multiple model-related settings from an object by using hooks.
+     * @param {Object} settings - An object containing settings to update.
+     */
+    updateModelSettings(settings) {
+        Object.entries(settings).forEach(([key, value]) => {
+            hooks.onUpdateModelSettings.forEach(fn => fn(key, value));
+        });
+    }
+}
+
+export default ConfigService;

js/state/store.js

@@ -0,0 +1,81 @@
+/**
+ * @fileoverview A simple reactive state store with a pub-sub mechanism.
+ */
+
+'use strict';
+
+import { hooks } from '../hooks.js';
+import { log } from '../utils/logger.js';
+
+/**
+ * @class Store
+ * A simple reactive state store with a pub-sub mechanism for observing changes.
+ */
+class Store {
+    /**
+     * @param {Object} initialState - The initial state of the store.
+     */
+    constructor(initialState) {
+        log(5, 'Store: Constructor called with initialState', initialState);
+        this.state = initialState;
+        this.subscribers = {};
+    }
+
+    /**
+     * Gets a value from the store by key.
+     * @param {string} key - The key of the value to get.
+     * @returns {*} The value associated with the key.
+     */
+    get(key) {
+        log(5, 'Store: get called for key', key);
+        return this.state[key];
+    }
+
+    /**
+     * Gets a shallow copy of the entire state object.
+     * @returns {Object} A copy of the state.
+     */
+    getState() {
+        log(5, 'Store: getState called');
+        return { ...this.state };
+    }
+
+    /**
+     * Sets a value in the store and notifies subscribers.
+     * @param {string} key - The key of the value to set.
+     * @param {*} value - The value to set.
+     */
+    set(key, value) {
+        log(5, 'Store: set called for key', key, 'value', value);
+        this.state[key] = value;
+        if (this.subscribers[key]) {
+            this.subscribers[key].forEach(cb => cb(value));
+        }
+        hooks.onStateChange.forEach(fn => fn(key, value));
+    }
+
+    /**
+     * Subscribes to changes for a specific key.
+     * @param {string} key - The key to subscribe to.
+     * @param {Function} cb - The callback to execute when the value changes.
+     */
+    subscribe(key, cb) {
+        log(5, 'Store: subscribe called for key', key);
+        if (!this.subscribers[key]) this.subscribers[key] = [];
+        this.subscribers[key].push(cb);
+    }
+
+    /**
+     * Unsubscribes from changes for a specific key.
+     * @param {string} key - The key to unsubscribe from.
+     * @param {Function} cb - The callback to remove.
+     */
+    unsubscribe(key, cb) {
+        log(5, 'Store: unsubscribe called for key', key);
+        if (!this.subscribers[key]) return;
+        this.subscribers[key] = this.subscribers[key].filter(subCb => subCb !== cb);
+        if (this.subscribers[key].length === 0) delete this.subscribers[key];
+    }
+}
+
+export default Store;

js/utils/chat.js

@@ -0,0 +1,75 @@
+/**
+ * @fileoverview Utility functions for chat management.
+ */
+
+'use strict';
+
+import { log } from './logger.js';
+import { Message } from '../components/chatlog.js';
+
+/**
+ * Generates a string with the current date and time prompt.
+ * @returns {string} The formatted date and time prompt.
+ */
+export function getDatePrompt() {
+    const now = new Date();
+    return `\n\nKnowledge cutoff: none\nCurrent date: ${now.toISOString().slice(0, 10)}\nCurrent time: ${now.toTimeString().slice(0, 5)}`;
+}
+
+/**
+ * Resets the editing state of a message in the chat.
+ * If a new message was being composed, it's discarded.
+ * If an existing message was being edited, it's restored.
+ * @param {import('../state/store.js').default} store - The application's state store.
+ * @param {import('../components/chatlog.js').Chatlog} chatlog - The chatlog instance.
+ * @param {import('../components/chatbox.js').Chatbox} chatbox - The chatbox instance.
+ */
+export function resetEditing(store, chatlog, chatbox) {
+    const currentEditingPos = store.get('editingPos');
+    if (currentEditingPos !== null) {
+        const prevMsg = chatlog.getNthMessage(currentEditingPos);
+        if (prevMsg) {
+            if (prevMsg.value.content === null) {
+                chatlog.deleteMessage(prevMsg); // Discard uncommitted new alternative
+            } else {
+                prevMsg.cache = null; // Restore original for previous edit
+            }
+        }
+        store.set('editingPos', null);
+        chatbox.update(false);
+    }
+}
+
+/**
+ * Adds a new message to the chat log.
+ * This is the preferred way to add a message to the chat log.
+ * @param {import('../components/chatlog.js').Chatlog} chatlog - The chatlog to add the message to.
+ * @param {Object} value - The value of the message to add.
+ * @returns {Message} The newly added message.
+ */
+export function addMessageToChat(chatlog, value) {
+    log(4, 'addMessageToChat called with value', value);
+    const message = chatlog.addMessage(value);
+    chatlog.notify();
+    return message;
+}
+
+/**
+ * Adds a new alternative to an existing message.
+ * This is the preferred way to add an alternative message.
+ * @param {import('../components/chatlog.js').Chatlog} chatlog - The chatlog instance.
+ * @param {Message | null} existingMessage - The message to add an alternative to. If null, the last message is used.
+ * @param {Object} newValue - The value for the new alternative message.
+ * @returns {Message | null} The newly created alternative message, or null if no target message was found.
+ */
+export function addAlternativeToChat(chatlog, existingMessage, newValue) {
+    log(4, 'addAlternativeToChat called for', existingMessage);
+    const targetMessage = existingMessage || chatlog.getLastMessage();
+    if (!targetMessage) {
+        log(2, "addAlternativeToChat: Cannot add alternative, no message found.");
+        return null;
+    }
+    const newMessage = chatlog.addAlternative(targetMessage, newValue);
+    chatlog.notify();
+    return newMessage;
+}

js/utils/logger.js

@@ -0,0 +1,30 @@
+/**
+ * @fileoverview Logging and error handling utilities.
+ */
+
+'use strict';
+
+import { hooks } from '../hooks.js';
+import { DEBUG_LEVEL } from '../config.js';
+
+/**
+ * Logs a message to the console if the level is high enough.
+ * @param {number} level - The log level.
+ * @param {...*} args - The arguments to log.
+ */
+export function log(level, ...args) {
+    if (DEBUG_LEVEL < level) return;
+    const prefixes = ['', 'ERROR', 'WARN', 'INFO', 'DEBUG', 'TRACE', 'FULLTRACE'];
+    const prefix = `[${prefixes[level]}]`;
+    const consoles = [console.log, console.error, console.warn, console.info, console.log, console.log, console.log];
+    consoles[level](prefix, ...args);
+}
+
+/**
+ * Triggers an error by logging it and notifying error listeners.
+ * @param {...*} args - The arguments to include in the error.
+ */
+export function triggerError(...args) {
+    log(1, ...args);
+    hooks.onError.forEach(fn => fn(...args));
+}

js/utils/parsers.js

@@ -0,0 +1,69 @@
+'use strict';
+
+import { log } from './logger.js';
+
+/**
+ * Parses <dma:tool_call> tags and extracts tool calls.
+ * @param {string} content - The content to parse.
+ * @returns {{toolCalls: Object[], positions: Object[], isSelfClosings: boolean[]}} The parsed tool calls, their positions, and self-closing flags.
+ */
+export function parseFunctionCalls(content) {
+    log(5, 'parseFunctionCalls called');
+    const toolCalls = [];
+    const positions = [];
+    const isSelfClosings = [];
+    const functionCallRegex = /<dma:tool_call\s+([^>]+?)\/>|<dma:tool_call\s+([^>]*?)>([\s\S]*?)<\/dma:tool_call\s*>/gi;
+    const nameRegex = /name="([^"]*)"/;
+    const paramsRegex = /<parameter\s+name="([^"]*)">([\s\S]*?)<\/parameter>/g;
+
+    for (const match of content.matchAll(functionCallRegex)) {
+        const startIndex = match.index;
+        const endIndex = startIndex + match[0].length;
+
+        const [, selfAttrs, openAttrs, innerContent] = match;
+
+        const isSelfClosing = innerContent === undefined;
+        const attributes = isSelfClosing ? selfAttrs : openAttrs;
+        const contentInner = isSelfClosing ? '' : innerContent;
+
+        const nameMatch = nameRegex.exec(attributes);
+        if (!nameMatch) continue;
+
+        const [, name] = nameMatch;
+        const params = {};
+
+        if (!isSelfClosing) {
+            let paramMatch;
+            while ((paramMatch = paramsRegex.exec(contentInner)) !== null) {
+                const [, paramName, paramValue] = paramMatch;
+                let value = paramValue.trim();
+                value = value.replace(/<\\\/dma:tool_call>/g, '</dma:tool_call>').replace(/<\\\/parameter>/g, '</parameter>');
+                params[paramName] = value;
+                log(5, "mcpPlugin: parseFunctionCalls value", value);
+            }
+        }
+
+        toolCalls.push({ name, params });
+        positions.push({ start: startIndex, end: endIndex });
+        isSelfClosings.push(isSelfClosing);
+    }
+
+    log(4, 'mcpPlugin: Parsed tool calls', toolCalls.length);
+    return { toolCalls, positions, isSelfClosings };
+}
+
+/**
+ * Escapes XML special characters.
+ * @param {string} unsafe - The string to escape.
+ * @returns {string} The escaped string.
+ */
+export function escapeXml(unsafe) {
+    return unsafe.replace(/[<>&'"\\]/g, c => ({
+        '<':'&lt;',
+        '>':'&gt;',
+        '&':'&amp;',
+        '\'':'&apos;',
+        '"':'&quot;',
+        '\\':'&bsol;'
+    })[c]);
+}

js/utils/shared.js

@@ -0,0 +1,132 @@
+/**
+ * @fileoverview Shared utility functions for the application.
+ */
+
+'use strict';
+
+import { log, triggerError } from './logger.js';
+import { parseFunctionCalls, escapeXml } from './parsers.js';
+import { hooks } from '../hooks.js';
+
+/**
+ * Processes tool calls found in a message, filters them, executes them,
+ * and adds the results back to the chat.
+ *
+ * @param {import('../components/chatlog.js').Message} message - The message containing the tool calls.
+ * @param {import('../components/chatlog.js').Chatlog} chatlog - The chatlog instance.
+ * @param {import('../components/chatbox.js').ChatBox} chatbox - The chatbox instance.
+ * @param {function(object): boolean} filterCallback - A function to filter which tool calls to process.
+ * @param {function(object): Promise<object>} executeCallback - An async function to execute a tool call and return the result.
+ * @param {object} context - Additional context to pass to the callbacks.
+ */
+export async function processToolCalls(message, chatlog, chatbox, filterCallback, executeCallback, context) {
+    if (message.value.role !== 'assistant') return;
+
+    const { toolCalls, positions, isSelfClosings } = parseFunctionCalls(message.value.content);
+    if (toolCalls.length === 0) return;
+
+    const applicableCalls = toolCalls.filter(filterCallback);
+    if (applicableCalls.length === 0) return;
+
+    // Assign unique IDs to each applicable call for tracking.
+    applicableCalls.forEach(call => {
+        call.id = `tool_call_${Date.now()}_${Math.random().toString(36).substring(2, 7)}`;
+    });
+
+    const toolResults = await Promise.all(
+        applicableCalls.map(call => executeCallback(call, context))
+    );
+
+    // Add/override tool_call_id attributes (in reverse to avoid index shifts).
+    let content = message.value.content;
+    for (let i = positions.length - 1; i >= 0; i--) {
+        const pos = positions[i];
+        const gtIndex = content.indexOf('>', pos.start);
+        let startTag = content.slice(pos.start, gtIndex + 1);
+        // Remove existing tool_call_id attributes
+        startTag = startTag.replace(/\s+tool_call_id\s*=\s*["'][^"']*["']/g, '');
+        // Insert new tool_call_id
+        const insert = ` tool_call_id="${toolCalls[i].id}"`;
+        const endSlice = isSelfClosings[i] ? -2 : -1;
+        const endTag = isSelfClosings[i] ? '/>' : '>';
+        startTag = startTag.slice(0, endSlice) + insert + endTag;
+        content = content.slice(0, pos.start) + startTag + content.slice(gtIndex + 1);
+    }
+    message.value.content = content;
+    message.cache = null;
+    chatbox.update(false);
+
+    let toolContents = '';
+    toolResults.forEach((tr, i) => {
+        const inner = tr.error
+            ? `<error>\n${tr.error}\n</error>`
+            : `<content>\n${tr.content}\n</content>`;
+        toolContents += `<dma:tool_response name="${applicableCalls[i].name}" tool_call_id="${tr.id}">\n${inner}\n</dma:tool_response>\n`;
+    });
+
+    if (toolContents) {
+        chatlog.addMessage({ role: 'tool', content: toolContents });
+        chatlog.addMessage(null);
+        chatbox.update();
+        hooks.onGenerateAIResponse.forEach(fn => fn({}, chatlog));
+    }
+}
+
+/**
+ * Creates a JSON file from the given data and triggers a download.
+ *
+ * @param {object|Array} data - The JSON data to export.
+ * @param {string} filenameBase - The base name for the downloaded file.
+ */
+export function exportJson(data, filenameBase) {
+    if (!data) {
+        triggerError('No data to export.');
+        return;
+    }
+
+    try {
+        const jsonData = JSON.stringify(data, null, 2);
+        const blob = new Blob([jsonData], { type: 'application/json' });
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        const date = new Date().toISOString().slice(0, 10);
+        a.download = `${filenameBase}_${date}.json`;
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        URL.revokeObjectURL(url);
+    } catch (error) {
+        triggerError(`Failed to export data: ${error.message}`);
+        log(1, 'Export failed', error);
+    }
+}
+
+/**
+ * Creates a file input to import a JSON file and processes its content.
+ *
+ * @param {string} accept - The accept attribute for the file input (e.g., 'application/json').
+ * @param {function(object): void} onParsedData - The callback function to handle the parsed JSON data.
+ */
+export function importJson(accept, onParsedData) {
+    const input = document.createElement('input');
+    input.type = 'file';
+    input.accept = accept;
+    input.addEventListener('change', (e) => {
+        const file = e.target.files[0];
+        if (!file) return;
+
+        const reader = new FileReader();
+        reader.onload = (event) => {
+            try {
+                const parsedData = JSON.parse(event.target.result);
+                onParsedData(parsedData);
+            } catch (error) {
+                triggerError(`Failed to import file: ${error.message}`);
+                log(1, 'Import failed', error);
+            }
+        };
+        reader.readAsText(file);
+    });
+    input.click();
+}

js/utils/ui.js

@@ -0,0 +1,41 @@
+/**
+ * @fileoverview UI utility functions for showing and hiding elements.
+ */
+
+'use strict';
+
+/**
+ * Displays the login section and hides the logout section.
+ */
+export function showLogin() {
+    document.getElementById('session-login').style.display = 'block';
+    document.getElementById('session-logout').style.display = 'none';
+}
+
+/**
+ * Displays the logout section and hides the login section.
+ */
+export function showLogout() {
+    document.getElementById('session-login').style.display = 'none';
+    document.getElementById('session-logout').style.display = 'block';
+}
+
+/**
+ * Helper function to create a tool button.
+ * @param {string} title - The button's title (tooltip).
+ * @param {string} svgHtml - The SVG icon for the button.
+ * @param {function} onClick - The click event handler.
+ * @returns {HTMLButtonElement} The created button element.
+ */
+export function createControlButton(title, svgHtml, onClick) {
+    const button = document.createElement('button');
+    button.title = title;
+    button.classList.add('toolButton', 'small');
+    button.innerHTML = svgHtml;
+    if (!onClick) return button;
+    button.addEventListener('click', (e) => {
+        e.stopPropagation();
+        onClick(e);
+    });
+    return button;
+}

main.py

@@ -0,0 +1,132 @@
+"""
+This script serves the static files for the chat application and runs an MCP proxy.
+"""
+
+import os
+import json
+import http.server
+import socketserver
+import threading
+import webbrowser
+import logging
+import argparse
+import signal
+import sys
+from fastmcp import FastMCP
+from starlette.middleware import Middleware
+from starlette.middleware.cors import CORSMiddleware
+
+
+class CustomHandler(http.server.SimpleHTTPRequestHandler):
+    """
+    Custom HTTP request handler to serve static files and the API configuration.
+    """
+
+    def log_message(self, format, *args):
+        """Logs an HTTP request."""
+        logging.info(f"WEB: {format % args}")
+
+    def do_GET(self):
+        """Handles GET requests."""
+        if self.path == "/api/config":
+            self.send_response(200)
+            self.send_header("Content-type", "application/json")
+            self.end_headers()
+            config = {"mcp_endpoint": "http://127.0.0.1:3000/mcp"}
+            self.wfile.write(json.dumps(config).encode("utf-8"))
+        else:
+            super().do_GET()
+
+
+def run_file_server():
+    """
+    Runs the static file server.
+    """
+
+    class ReuseTCPServer(socketserver.TCPServer):
+        """
+        A TCP server that allows address reuse.
+        """
+
+        allow_reuse_address = True
+
+    with ReuseTCPServer(("", 8000), CustomHandler) as server:
+        logging.info("WEB: Serving static files at http://localhost:8000")
+        server.serve_forever()
+
+
+def load_config():
+    """
+    Loads the MCP configuration from a JSON file.
+    """
+    path = os.getenv("MCP_CONFIG", "mcp_config.json")
+    if not os.path.exists(path):
+        logging.warning(f"{path} not found, using empty config")
+        return {}
+    try:
+        with open(path) as f:
+            return json.load(f)
+    except json.JSONDecodeError as e:
+        logging.error(f"JSON decode error in {path}: {e}")
+        return {}
+    except Exception as e:
+        logging.error(f"Error loading {path}: {e}")
+        return {}
+
+
+def setup_proxy(mcp_servers):
+    """
+    Sets up the MCP proxy.
+    """
+    if not mcp_servers:
+        return None
+    proxy = FastMCP.as_proxy({"mcpServers": mcp_servers}, name="Composite Proxy")
+    cors = [
+        Middleware(
+            CORSMiddleware,
+            allow_origins=["*"],
+            allow_credentials=True,
+            allow_methods=["*"],
+            allow_headers=["*"],
+            expose_headers=["MCP-Session-ID", "X-MCP-Session-ID"],
+        )
+    ]
+    return proxy, cors
+
+
+def shutdown(sig, frame):
+    """
+    Shuts down the application gracefully.
+    """
+    logging.info("Shutting down gracefully")
+    sys.exit(0)
+
+
+def main():
+    """
+    Main function to run the application.
+    """
+    parser = argparse.ArgumentParser(description="Run MCP proxy and web server")
+    parser.add_argument("--verbose", "-v", action="store_true", help="Enable debug logging")
+    args = parser.parse_args()
+
+    level = logging.DEBUG if args.verbose else logging.INFO
+    logging.basicConfig(level=level, format="%(asctime)s - %(levelname)s - %(message)s")
+
+    signal.signal(signal.SIGINT, shutdown)
+    signal.signal(signal.SIGTERM, shutdown)
+
+    mcp_servers = load_config()
+    proxy_info = setup_proxy(mcp_servers)
+
+    threading.Thread(target=run_file_server, daemon=True).start()
+    webbrowser.open("http://localhost:8000")
+
+    if proxy_info:
+        proxy, cors = proxy_info
+        logging.info("MCP: Starting proxy at http://127.0.0.1:3000/mcp")
+        proxy.run(transport="http", host="127.0.0.1", port=3000, middleware=cors)
+
+
+if __name__ == "__main__":
+    main()

mcp_config-examples.json

@@ -0,0 +1,48 @@
+{
+  "datetime": {
+    "command": "uvx",
+    "args": [
+      "fastmcp",
+      "run",
+      "./_mcp_servers/datetime-mcp/datetime-mcp.py"
+    ]
+  },
+  "fetch": {
+    "command": "uvx",
+    "args": [
+      "fastmcp",
+      "run",
+      "./_mcp_servers/fetch-mcp/fetch-mcp.py"
+    ]
+  },
+  "filesystem-read": {
+    "command": "uvx",
+    "args": [
+      "fastmcp",
+      "run",
+      "./_mcp_servers/filesystem_read-mcp/filesystem_read-mcp.py",
+      "--",
+      "./_mcp_filesystem/read_write"
+    ]
+  },
+  "filesystem-write": {
+    "command": "uvx",
+    "args": [
+      "fastmcp",
+      "run",
+      "./_mcp_servers/filesystem_write-mcp/filesystem_write-mcp.py",
+      "--",
+      "./_mcp_filesystem/read_write"
+    ]
+  },
+  "watcher": {
+    "command": "uvx",
+    "args": [
+      "fastmcp",
+      "run",
+      "./_mcp_servers/file_watcher-mcp/file_watcher-mcp.py",
+      "--",
+      "./_mcp_filesystem/watcher"
+    ]
+  }
+}

mcp_config.json

@@ -0,0 +1,38 @@
+{
+  "datetime": {
+    "command": "uvx",
+    "args": [
+      "fastmcp",
+      "run",
+      "./_mcp_servers/datetime-mcp/datetime-mcp.py"
+    ]
+  },
+  "fetch": {
+    "command": "uvx",
+    "args": [
+      "fastmcp",
+      "run",
+      "./_mcp_servers/fetch-mcp/fetch-mcp.py"
+    ]
+  },
+  "filesystem-read": {
+    "command": "uvx",
+    "args": [
+      "fastmcp",
+      "run",
+      "./_mcp_servers/filesystem_read-mcp/filesystem_read-mcp.py",
+      "--",
+      "./_mcp_filesystem/read_write"
+    ]
+  },
+  "watcher": {
+    "command": "uvx",
+    "args": [
+      "fastmcp",
+      "run",
+      "./_mcp_servers/file_watcher-mcp/file_watcher-mcp.py",
+      "--",
+      "./_mcp_filesystem/watcher"
+    ]
+  }
+}

pyproject.toml

@@ -0,0 +1,10 @@
+[project]
+name = "aiflow-chat"
+version = "0.1.0"
+description = "Chat application with flows, agents and MCP support"
+readme = "README.md"
+requires-python = ">=3.13"
+dependencies = [
+    "fastmcp>=2.0.0",
+    "fastapi>=0.116.1",
+]