From d44bcf6fda777411a9916f939c40c26205c0fad9 Mon Sep 17 00:00:00 2001
From: Daan Meijer <daan@studioseptember.nl>
Date: Tue, 16 Jun 2026 10:53:44 +0200
Subject: [PATCH] formatting, browser tests

---
 resources/js/app.ts                          |   2 +-
 resources/js/components/AddMutationForm.vue  |  25 ++--
 resources/js/components/AppHeader.vue        |   7 +-
 resources/js/components/Chat.vue             | 123 +++++++++++++------
 resources/js/components/CreateLedgerForm.vue |  35 +++---
 resources/js/components/LedgerList.vue       |  12 +-
 resources/js/components/MutationList.vue     |  12 +-
 resources/js/components/ParticipantsList.vue |   4 +-
 resources/js/pages/Dashboard.vue             |  51 ++++----
 resources/js/pages/Dynamics/Create.vue       |  17 +--
 resources/js/pages/Dynamics/Index.vue        |   4 +-
 resources/js/pages/Dynamics/Show.vue         |   1 +
 resources/js/pages/Ledgers/Show.vue          |  16 ++-
 tests/Browser/AuthenticationTest.php         |  39 ++++++
 tests/Browser/AuthorizationTest.php          |  83 +++++++++++++
 15 files changed, 301 insertions(+), 130 deletions(-)
 create mode 100644 tests/Browser/AuthenticationTest.php
 create mode 100644 tests/Browser/AuthorizationTest.php

diff --git a/resources/js/app.ts b/resources/js/app.ts
index 0618fb2..46d341c 100644
--- a/resources/js/app.ts
+++ b/resources/js/app.ts
@@ -19,7 +19,7 @@ configureEcho({
     forceTLS: false,
     enabledTransports: ['ws', 'wss'],
 });
-if(window){
+if (window) {
     (window as any).echoConfigured = true;
 }
 
diff --git a/resources/js/components/AddMutationForm.vue b/resources/js/components/AddMutationForm.vue
index afc449e..07e7703 100644
--- a/resources/js/components/AddMutationForm.vue
+++ b/resources/js/components/AddMutationForm.vue
@@ -42,17 +42,10 @@ function submit() {
 
 <template>
     <div class="c-add-mutation-form">
-        <h4 class="c-add-mutation-form__title">
-            Add Mutation
-        </h4>
-        <form
-            @submit.prevent="submit"
-            class="c-add-mutation-form__form"
-        >
+        <h4 class="c-add-mutation-form__title">Add Mutation</h4>
+        <form @submit.prevent="submit" class="c-add-mutation-form__form">
             <div class="c-add-mutation-form__field">
-                <label
-                    for="amount"
-                    class="c-add-mutation-form__label"
+                <label for="amount" class="c-add-mutation-form__label"
                     >Amount</label
                 >
                 <input
@@ -61,15 +54,16 @@ function submit() {
                     type="number"
                     class="c-add-mutation-form__input"
                 />
-                <div v-if="form.errors.amount" class="c-add-mutation-form__error">
+                <div
+                    v-if="form.errors.amount"
+                    class="c-add-mutation-form__error"
+                >
                     {{ form.errors.amount }}
                 </div>
             </div>
 
             <div class="c-add-mutation-form__field">
-                <label
-                    for="description"
-                    class="c-add-mutation-form__label"
+                <label for="description" class="c-add-mutation-form__label"
                     >Description</label
                 >
                 <textarea
@@ -88,8 +82,7 @@ function submit() {
 
             <!-- Media Uploads for Mutations -->
             <div class="c-add-mutation-form__field">
-                <label
-                    class="c-add-mutation-form__label"
+                <label class="c-add-mutation-form__label"
                     >Attach Proof Media (Photos/Videos)</label
                 >
                 <input
diff --git a/resources/js/components/AppHeader.vue b/resources/js/components/AppHeader.vue
index 10cdf62..e71c7ce 100644
--- a/resources/js/components/AppHeader.vue
+++ b/resources/js/components/AppHeader.vue
@@ -33,6 +33,7 @@ import {
 } from '@/components/ui/tooltip';
 import UserMenuContent from '@/components/UserMenuContent.vue';
 import { useCurrentUrl } from '@/composables/useCurrentUrl';
+import { route } from 'ziggy-js';
 import { getInitials } from '@/composables/useInitials';
 import { toUrl } from '@/lib/utils';
 import { dashboard } from '@/routes';
@@ -239,7 +240,7 @@ const rightNavItems: NavItem[] = [
                     </div>
 
                     <div
-                        v-if="page.props.unreadNotificationsCount > 0"
+                        v-if="(page.props as any).unreadNotificationsCount > 0"
                         class="relative"
                     >
                         <Link
@@ -260,7 +261,9 @@ const rightNavItems: NavItem[] = [
                                     d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"
                                 />
                             </svg>
-                            <span class="absolute -top-1 -right-1 flex h-4 w-4 items-center justify-center rounded-full bg-red-600 text-[10px] font-bold text-white">
+                            <span
+                                class="absolute -top-1 -right-1 flex h-4 w-4 items-center justify-center rounded-full bg-red-600 text-[10px] font-bold text-white"
+                            >
                                 {{ page.props.unreadNotificationsCount }}
                             </span>
                         </Link>
diff --git a/resources/js/components/Chat.vue b/resources/js/components/Chat.vue
index 28f298b..9bea09b 100644
--- a/resources/js/components/Chat.vue
+++ b/resources/js/components/Chat.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
+import { ref } from 'vue';
 import { useForm } from '@inertiajs/vue3';
 import { useEcho, echoIsConfigured, configureEcho } from '@laravel/echo-vue';
-import { Paperclip } from '@lucide/vue';
-import { ref } from 'vue';
 import { route } from 'ziggy-js';
+import { Paperclip, Info } from '@lucide/vue';
 
 const props = defineProps<{
     chat: {
@@ -52,7 +52,6 @@ useEcho(`chats.${props.chat.id}`, 'MessageSent', (e: any) => {
 
 function handleFileChange(event: Event) {
     const files = (event.target as HTMLInputElement).files;
-
     if (files) {
         for (let i = 0; i < files.length; i++) {
             form.media.push(files[i]);
@@ -68,7 +67,6 @@ function submit() {
     form.post(route('chats.messages.store', props.chat.id), {
         onSuccess: () => {
             form.reset();
-
             if (fileInput.value) {
                 fileInput.value.value = '';
             }
@@ -100,50 +98,77 @@ function closeLightbox() {
             <div
                 v-for="message in chat.messages"
                 :key="message.id"
-                class="c-chat__message"
+                :class="[
+                    'c-chat__message',
+                    {
+                        'c-chat__message--system':
+                            message.content.startsWith('System:'),
+                    },
+                ]"
             >
-                <div class="c-chat__message-header">
-                    <span class="c-chat__message-author">{{
-                        message.user.name
-                    }}</span>
-                    <span class="c-chat__message-time">{{
-                        new Date(message.created_at).toLocaleString()
-                    }}</span>
-                </div>
-                <p class="c-chat__message-text">
-                    {{ message.content }}
-                </p>
+                <!-- Standard User Chat Message -->
+                <template v-if="!message.content.startsWith('System:')">
+                    <div class="c-chat__message-header">
+                        <span class="c-chat__message-author">{{
+                            message.user.name
+                        }}</span>
+                        <span class="c-chat__message-time">{{
+                            new Date(message.created_at).toLocaleString()
+                        }}</span>
+                    </div>
+                    <p class="c-chat__message-text">
+                        {{ message.content }}
+                    </p>
 
-                <!-- Attached Media Display -->
-                <div
-                    v-if="message.media && message.media.length > 0"
-                    class="c-chat__message-media"
-                >
+                    <!-- Attached Media Display -->
                     <div
-                        v-for="item in message.media"
-                        :key="item.id"
-                        class="c-chat__media-item"
+                        v-if="message.media && message.media.length > 0"
+                        class="c-chat__message-media"
                     >
-                        <img
-                            v-if="item.mime_type.startsWith('image/')"
-                            :src="item.url"
-                            :alt="item.file_name"
-                            class="c-chat__image cursor-pointer transition-opacity hover:opacity-90"
-                            @click="openLightbox(item.url, item.mime_type)"
-                        />
                         <div
-                            v-else-if="item.mime_type.startsWith('video/')"
-                            class="relative cursor-pointer transition-opacity hover:opacity-90"
-                            @click="openLightbox(item.url, item.mime_type)"
+                            v-for="item in message.media"
+                            :key="item.id"
+                            class="c-chat__media-item"
                         >
-                            <video
+                            <img
+                                v-if="item.mime_type.startsWith('image/')"
                                 :src="item.url"
-                                class="c-chat__video"
-                            ></video>
-                            <div class="c-chat__play-overlay">▶</div>
+                                :alt="item.file_name"
+                                class="c-chat__image cursor-pointer transition-opacity hover:opacity-90"
+                                @click="openLightbox(item.url, item.mime_type)"
+                            />
+                            <div
+                                v-else-if="item.mime_type.startsWith('video/')"
+                                class="relative cursor-pointer transition-opacity hover:opacity-90"
+                                @click="openLightbox(item.url, item.mime_type)"
+                            >
+                                <video
+                                    :src="item.url"
+                                    class="c-chat__video"
+                                ></video>
+                                <div class="c-chat__play-overlay">▶</div>
+                            </div>
                         </div>
                     </div>
-                </div>
+                </template>
+
+                <!-- Subtle Activity Log System Message -->
+                <template v-else>
+                    <div class="c-chat__system-inner">
+                        <Info class="c-chat__system-icon" />
+                        <span class="c-chat__system-text">
+                            {{ message.content.replace(/^System:\s*/, '') }}
+                        </span>
+                        <span class="c-chat__system-time">
+                            {{
+                                new Date(message.created_at).toLocaleTimeString(
+                                    [],
+                                    { hour: '2-digit', minute: '2-digit' },
+                                )
+                            }}
+                        </span>
+                    </div>
+                </template>
             </div>
             <div v-if="chat.messages.length === 0" class="c-chat__empty">
                 No messages yet.
@@ -260,6 +285,26 @@ function closeLightbox() {
     @apply overflow-hidden bg-white p-4 shadow-sm sm:rounded-lg dark:bg-gray-800;
 }
 
+.c-chat__message--system {
+    @apply border-0 bg-transparent p-0 shadow-none;
+}
+
+.c-chat__system-inner {
+    @apply flex items-center gap-2 rounded-md border border-neutral-200/60 bg-neutral-50 px-3 py-1.5 text-xs text-neutral-500 dark:border-neutral-800/40 dark:bg-neutral-900/10 dark:text-neutral-400;
+}
+
+.c-chat__system-icon {
+    @apply size-3.5 shrink-0 text-neutral-400;
+}
+
+.c-chat__system-text {
+    @apply flex-1 font-medium;
+}
+
+.c-chat__system-time {
+    @apply shrink-0 text-[10px] text-neutral-400;
+}
+
 .c-chat__message-header {
     @apply flex justify-between;
 }
diff --git a/resources/js/components/CreateLedgerForm.vue b/resources/js/components/CreateLedgerForm.vue
index 463ff2e..e62b04c 100644
--- a/resources/js/components/CreateLedgerForm.vue
+++ b/resources/js/components/CreateLedgerForm.vue
@@ -40,11 +40,12 @@ function submit() {
             <div class="c-create-ledger-form__body">
                 <h3 class="c-create-ledger-form__title">Create a New Ledger</h3>
 
-                <form @submit.prevent="submit" class="c-create-ledger-form__form">
+                <form
+                    @submit.prevent="submit"
+                    class="c-create-ledger-form__form"
+                >
                     <div class="c-create-ledger-form__field">
-                        <label
-                            for="name"
-                            class="c-create-ledger-form__label"
+                        <label for="name" class="c-create-ledger-form__label"
                             >Name</label
                         >
                         <input
@@ -62,9 +63,7 @@ function submit() {
                     </div>
 
                     <div class="c-create-ledger-form__field">
-                        <label
-                            for="rules"
-                            class="c-create-ledger-form__label"
+                        <label for="rules" class="c-create-ledger-form__label"
                             >Rules</label
                         >
                         <textarea
@@ -92,9 +91,15 @@ function submit() {
                             id="alignment"
                             class="c-create-ledger-form__select"
                         >
-                            <option value="positive">Positive (Higher Score is Better)</option>
-                            <option value="neutral">Neutral (Frictionless / Standard)</option>
-                            <option value="negative">Negative (Lower Score is Better / Demerits)</option>
+                            <option value="positive">
+                                Positive (Higher Score is Better)
+                            </option>
+                            <option value="neutral">
+                                Neutral (Frictionless / Standard)
+                            </option>
+                            <option value="negative">
+                                Negative (Lower Score is Better / Demerits)
+                            </option>
                         </select>
                         <div
                             v-if="form.errors.alignment"
@@ -106,8 +111,7 @@ function submit() {
 
                     <!-- Media Uploads for Ledgers -->
                     <div class="c-create-ledger-form__field">
-                        <label
-                            class="c-create-ledger-form__label"
+                        <label class="c-create-ledger-form__label"
                             >Attach Cover/Rules Media</label
                         >
                         <input
@@ -126,9 +130,10 @@ function submit() {
                                 :key="index"
                                 class="c-create-ledger-form__media-preview-item"
                             >
-                                <span class="c-create-ledger-form__media-preview-name">{{
-                                    file.name
-                                }}</span>
+                                <span
+                                    class="c-create-ledger-form__media-preview-name"
+                                    >{{ file.name }}</span
+                                >
                                 <button
                                     type="button"
                                     @click="removeLedgerFile(index)"
diff --git a/resources/js/components/LedgerList.vue b/resources/js/components/LedgerList.vue
index 668f840..ca79c06 100644
--- a/resources/js/components/LedgerList.vue
+++ b/resources/js/components/LedgerList.vue
@@ -17,9 +17,7 @@ defineProps<{
 <template>
     <div class="c-ledger-list">
         <div class="c-ledger-list__header">
-            <h4 class="c-ledger-list__title">
-                Ledgers
-            </h4>
+            <h4 class="c-ledger-list__title">Ledgers</h4>
         </div>
         <ul class="c-ledger-list__grid">
             <li
@@ -131,19 +129,19 @@ defineProps<{
 }
 
 .c-ledger-list__alignment-badge {
-    @apply text-[10px] font-semibold uppercase tracking-wide px-1.5 py-0.5 rounded;
+    @apply rounded px-1.5 py-0.5 text-[10px] font-semibold tracking-wide uppercase;
 }
 
 .c-ledger-list__alignment-badge--positive {
-    @apply text-green-600 bg-green-50/50 dark:text-green-400 dark:bg-green-950/20;
+    @apply bg-green-50/50 text-green-600 dark:bg-green-950/20 dark:text-green-400;
 }
 
 .c-ledger-list__alignment-badge--negative {
-    @apply text-red-600 bg-red-50/50 dark:text-red-400 dark:bg-red-950/20;
+    @apply bg-red-50/50 text-red-600 dark:bg-red-950/20 dark:text-red-400;
 }
 
 .c-ledger-list__alignment-badge--neutral {
-    @apply text-gray-500 bg-gray-50/50 dark:text-gray-400 dark:bg-neutral-800/20;
+    @apply bg-gray-50/50 text-gray-500 dark:bg-neutral-800/20 dark:text-gray-400;
 }
 
 .c-ledger-list__media-list {
diff --git a/resources/js/components/MutationList.vue b/resources/js/components/MutationList.vue
index ea6a99b..e158ed7 100644
--- a/resources/js/components/MutationList.vue
+++ b/resources/js/components/MutationList.vue
@@ -50,12 +50,16 @@ function getAmountClass(amount: number): string {
     const alignment = props.ledgerAlignment || 'neutral';
 
     if (alignment === 'positive') {
-        return amount > 0 ? 'c-mutation-list__item-amount--positive' : 'c-mutation-list__item-amount--negative';
+        return amount > 0
+            ? 'c-mutation-list__item-amount--positive'
+            : 'c-mutation-list__item-amount--negative';
     }
 
     if (alignment === 'negative') {
         // Lower is better: negative amount is positive/favorable, positive amount is negative/unfavorable
-        return amount < 0 ? 'c-mutation-list__item-amount--positive' : 'c-mutation-list__item-amount--negative';
+        return amount < 0
+            ? 'c-mutation-list__item-amount--positive'
+            : 'c-mutation-list__item-amount--negative';
     }
 
     // Neutral alignment
@@ -65,9 +69,7 @@ function getAmountClass(amount: number): string {
 
 <template>
     <div class="c-mutation-list">
-        <h4 class="c-mutation-list__title">
-            Mutations
-        </h4>
+        <h4 class="c-mutation-list__title">Mutations</h4>
         <ul class="c-mutation-list__list">
             <li
                 v-for="mutation in mutations"
diff --git a/resources/js/components/ParticipantsList.vue b/resources/js/components/ParticipantsList.vue
index c67abb5..9cb7ac4 100644
--- a/resources/js/components/ParticipantsList.vue
+++ b/resources/js/components/ParticipantsList.vue
@@ -9,9 +9,7 @@ defineProps<{
 
 <template>
     <div class="c-participants-list">
-        <h4 class="c-participants-list__title">
-            Participants
-        </h4>
+        <h4 class="c-participants-list__title">Participants</h4>
         <ul class="c-participants-list__grid">
             <li
                 v-for="participant in participants"
diff --git a/resources/js/pages/Dashboard.vue b/resources/js/pages/Dashboard.vue
index da8c43c..a2471ba 100644
--- a/resources/js/pages/Dashboard.vue
+++ b/resources/js/pages/Dashboard.vue
@@ -62,7 +62,7 @@ function formatTime(isoString: string): string {
                                     'c-dashboard__badge-type',
                                     entity.type === 'Dynamic'
                                         ? 'c-dashboard__badge-type--dynamic'
-                                        : 'c-dashboard__badge-type--ledger'
+                                        : 'c-dashboard__badge-type--ledger',
                                 ]"
                             >
                                 {{ entity.type }}
@@ -71,7 +71,10 @@ function formatTime(isoString: string): string {
                                 {{ entity.unread_count }} New
                             </span>
                         </div>
-                        <Link :href="entity.url" class="c-dashboard__entity-link">
+                        <Link
+                            :href="entity.url"
+                            class="c-dashboard__entity-link"
+                        >
                             <h3 class="c-dashboard__entity-title">
                                 {{ entity.name }}
                             </h3>
@@ -103,7 +106,9 @@ function formatTime(isoString: string): string {
                             v-if="entity.context_activities.length > 0"
                             class="c-dashboard__divider"
                         >
-                            <span class="c-dashboard__divider-text">New Activity Below</span>
+                            <span class="c-dashboard__divider-text"
+                                >New Activity Below</span
+                            >
                         </div>
 
                         <!-- New / Unread Activities -->
@@ -131,9 +136,7 @@ function formatTime(isoString: string): string {
 
             <!-- Empty Caught-Up State -->
             <div v-else class="c-dashboard__empty-state">
-                <div class="c-dashboard__empty-icon">
-                    🔒
-                </div>
+                <div class="c-dashboard__empty-icon">🔒</div>
                 <p class="c-dashboard__empty-text">
                     All chambers are currently quiet.
                 </p>
@@ -149,7 +152,7 @@ function formatTime(isoString: string): string {
 @reference "../../css/app.css";
 
 .c-dashboard {
-    @apply py-8 px-4 sm:px-6 lg:px-8;
+    @apply px-4 py-8 sm:px-6 lg:px-8;
 }
 
 .c-dashboard__container {
@@ -157,7 +160,7 @@ function formatTime(isoString: string): string {
 }
 
 .c-dashboard__title {
-    @apply text-xl font-bold tracking-tight text-neutral-900 dark:text-neutral-100 mb-6;
+    @apply mb-6 text-xl font-bold tracking-tight text-neutral-900 dark:text-neutral-100;
 }
 
 .c-dashboard__grid {
@@ -169,15 +172,15 @@ function formatTime(isoString: string): string {
 }
 
 .c-dashboard__card-header {
-    @apply p-6 border-b border-neutral-100 dark:border-neutral-800/30;
+    @apply border-b border-neutral-100 p-6 dark:border-neutral-800/30;
 }
 
 .c-dashboard__entity-meta {
-    @apply flex items-center gap-2 mb-2;
+    @apply mb-2 flex items-center gap-2;
 }
 
 .c-dashboard__badge-type {
-    @apply text-[10px] font-bold uppercase tracking-wider px-1.5 py-0.5 rounded;
+    @apply rounded px-1.5 py-0.5 text-[10px] font-bold tracking-wider uppercase;
 }
 
 .c-dashboard__badge-type--dynamic {
@@ -189,7 +192,7 @@ function formatTime(isoString: string): string {
 }
 
 .c-dashboard__unread-count {
-    @apply text-[10px] font-bold uppercase tracking-wider px-1.5 py-0.5 rounded bg-red-100 text-red-800 dark:bg-red-950/20 dark:text-red-400;
+    @apply rounded bg-red-100 px-1.5 py-0.5 text-[10px] font-bold tracking-wider text-red-800 uppercase dark:bg-red-950/20 dark:text-red-400;
 }
 
 .c-dashboard__entity-link {
@@ -201,23 +204,23 @@ function formatTime(isoString: string): string {
 }
 
 .c-dashboard__activity-list {
-    @apply flex-1 p-6 space-y-4;
+    @apply flex-1 space-y-4 p-6;
 }
 
 .c-dashboard__activity-item {
-    @apply p-4 rounded-lg border;
+    @apply rounded-lg border p-4;
 }
 
 .c-dashboard__activity-item--read {
-    @apply bg-neutral-50/50 border-neutral-200 opacity-60 dark:bg-neutral-950/20 dark:border-neutral-800/50;
+    @apply border-neutral-200 bg-neutral-50/50 opacity-60 dark:border-neutral-800/50 dark:bg-neutral-950/20;
 }
 
 .c-dashboard__activity-item--unread {
-    @apply bg-red-50/10 border-red-200/50 dark:bg-red-950/5 dark:border-red-900/30;
+    @apply border-red-200/50 bg-red-50/10 dark:border-red-900/30 dark:bg-red-950/5;
 }
 
 .c-dashboard__activity-meta {
-    @apply flex items-center gap-2 mb-1.5 text-xs;
+    @apply mb-1.5 flex items-center gap-2 text-xs;
 }
 
 .c-dashboard__activity-user {
@@ -229,7 +232,7 @@ function formatTime(isoString: string): string {
 }
 
 .c-dashboard__new-badge {
-    @apply ml-auto text-[9px] font-bold text-red-600 bg-red-100 dark:text-red-400 dark:bg-red-950/30 px-1 py-0.5 rounded;
+    @apply ml-auto rounded bg-red-100 px-1 py-0.5 text-[9px] font-bold text-red-600 dark:bg-red-950/30 dark:text-red-400;
 }
 
 .c-dashboard__activity-desc {
@@ -237,11 +240,11 @@ function formatTime(isoString: string): string {
 }
 
 .c-dashboard__divider {
-    @apply relative flex items-center justify-center my-4;
+    @apply relative my-4 flex items-center justify-center;
 }
 
 .c-dashboard__divider-text {
-    @apply bg-white dark:bg-neutral-900 px-3 text-[10px] font-bold uppercase tracking-widest text-neutral-400 dark:text-neutral-500 z-10;
+    @apply z-10 bg-white px-3 text-[10px] font-bold tracking-widest text-neutral-400 uppercase dark:bg-neutral-900 dark:text-neutral-500;
 }
 
 .c-dashboard__divider::before {
@@ -250,11 +253,11 @@ function formatTime(isoString: string): string {
 }
 
 .c-dashboard__empty-state {
-    @apply flex flex-col items-center justify-center p-12 text-center rounded-2xl border border-dashed border-neutral-200 dark:border-neutral-800 min-h-[300px];
+    @apply flex min-h-[300px] flex-col items-center justify-center rounded-2xl border border-dashed border-neutral-200 p-12 text-center dark:border-neutral-800;
 }
 
 .c-dashboard__empty-icon {
-    @apply text-4xl mb-4;
+    @apply mb-4 text-4xl;
 }
 
 .c-dashboard__empty-text {
@@ -262,6 +265,6 @@ function formatTime(isoString: string): string {
 }
 
 .c-dashboard__empty-subtext {
-    @apply mt-1 text-sm text-neutral-500 dark:text-neutral-500 max-w-md;
+    @apply mt-1 max-w-md text-sm text-neutral-500 dark:text-neutral-500;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/resources/js/pages/Dynamics/Create.vue b/resources/js/pages/Dynamics/Create.vue
index 7df0020..27a899f 100644
--- a/resources/js/pages/Dynamics/Create.vue
+++ b/resources/js/pages/Dynamics/Create.vue
@@ -30,13 +30,16 @@ function submit() {
         <div class="c-dynamics-create__container">
             <div class="c-dynamics-create__card">
                 <div class="c-dynamics-create__body">
-                    <h3 class="c-dynamics-create__title">Create a New Dynamic</h3>
+                    <h3 class="c-dynamics-create__title">
+                        Create a New Dynamic
+                    </h3>
 
-                    <form @submit.prevent="submit" class="c-dynamics-create__form">
+                    <form
+                        @submit.prevent="submit"
+                        class="c-dynamics-create__form"
+                    >
                         <div class="c-dynamics-create__field">
-                            <label
-                                for="name"
-                                class="c-dynamics-create__label"
+                            <label for="name" class="c-dynamics-create__label"
                                 >Name</label
                             >
                             <input
@@ -54,9 +57,7 @@ function submit() {
                         </div>
 
                         <div class="c-dynamics-create__field">
-                            <label
-                                for="rules"
-                                class="c-dynamics-create__label"
+                            <label for="rules" class="c-dynamics-create__label"
                                 >Rules</label
                             >
                             <textarea
diff --git a/resources/js/pages/Dynamics/Index.vue b/resources/js/pages/Dynamics/Index.vue
index adb8645..c80a68d 100644
--- a/resources/js/pages/Dynamics/Index.vue
+++ b/resources/js/pages/Dynamics/Index.vue
@@ -51,7 +51,9 @@ const breadcrumbs = [
                         </div>
                     </div>
                     <div v-else>
-                        <p class="c-dynamics-index__empty">You don't have any dynamics yet.</p>
+                        <p class="c-dynamics-index__empty">
+                            You don't have any dynamics yet.
+                        </p>
                     </div>
                 </div>
             </div>
diff --git a/resources/js/pages/Dynamics/Show.vue b/resources/js/pages/Dynamics/Show.vue
index fef1908..2cc1896 100644
--- a/resources/js/pages/Dynamics/Show.vue
+++ b/resources/js/pages/Dynamics/Show.vue
@@ -17,6 +17,7 @@ const props = defineProps<{
             id: number;
             name: string;
             score: number;
+            alignment: string;
             media?: Array<{ id: number; url: string; mime_type: string }>;
         }>;
     };
diff --git a/resources/js/pages/Ledgers/Show.vue b/resources/js/pages/Ledgers/Show.vue
index bee6f0e..a6c51f2 100644
--- a/resources/js/pages/Ledgers/Show.vue
+++ b/resources/js/pages/Ledgers/Show.vue
@@ -188,7 +188,8 @@ function isOwnerUser(userId: number): boolean {
                             v-else-if="ledger.alignment === 'negative'"
                             class="c-ledger-show__alignment-badge c-ledger-show__alignment-badge--negative"
                         >
-                            ▼ Negative Alignment — A lower score is better (demerits / infractions).
+                            ▼ Negative Alignment — A lower score is better
+                            (demerits / infractions).
                         </span>
                         <span
                             v-else
@@ -254,10 +255,7 @@ function isOwnerUser(userId: number): boolean {
         class="c-ledger-show__lightbox"
         @click="closeLightbox"
     >
-        <button
-            @click="closeLightbox"
-            class="c-ledger-show__lightbox-close"
-        >
+        <button @click="closeLightbox" class="c-ledger-show__lightbox-close">
             ✕
         </button>
         <div class="c-ledger-show__lightbox-content" @click.stop>
@@ -325,19 +323,19 @@ function isOwnerUser(userId: number): boolean {
 }
 
 .c-ledger-show__alignment-badge {
-    @apply text-xs font-semibold uppercase tracking-wide px-2.5 py-1 rounded;
+    @apply rounded px-2.5 py-1 text-xs font-semibold tracking-wide uppercase;
 }
 
 .c-ledger-show__alignment-badge--positive {
-    @apply text-green-600 bg-green-50/50 dark:text-green-400 dark:bg-green-950/20;
+    @apply bg-green-50/50 text-green-600 dark:bg-green-950/20 dark:text-green-400;
 }
 
 .c-ledger-show__alignment-badge--negative {
-    @apply text-red-600 bg-red-50/50 dark:text-red-400 dark:bg-red-950/20;
+    @apply bg-red-50/50 text-red-600 dark:bg-red-950/20 dark:text-red-400;
 }
 
 .c-ledger-show__alignment-badge--neutral {
-    @apply text-gray-500 bg-gray-50/50 dark:text-gray-400 dark:bg-neutral-800/20;
+    @apply bg-gray-50/50 text-gray-500 dark:bg-neutral-800/20 dark:text-gray-400;
 }
 
 .c-ledger-show__media-list {
diff --git a/tests/Browser/AuthenticationTest.php b/tests/Browser/AuthenticationTest.php
new file mode 100644
index 0000000..df23fec
--- /dev/null
+++ b/tests/Browser/AuthenticationTest.php
@@ -0,0 +1,39 @@
+<?php
+
+namespace Tests\Browser;
+
+use App\Models\User;
+use Laravel\Dusk\Browser;
+use Tests\DuskTestCase;
+
+test('user can register, log in, and log out', function () {
+    $this->browse(function (Browser $browser) {
+        // 1. Test Registration
+        $browser->visit('/register')
+            ->waitForText('Create an account')
+            ->type('name', 'New Browser User')
+            ->type('email', 'newbrowseruser@example.com')
+            ->type('password', 'password')
+            ->type('password_confirmation', 'password')
+            ->press('Create account')
+            ->waitForLocation('/dashboard')
+            ->assertPathIs('/dashboard')
+            ->assertSee('New Browser User');
+
+        // 2. Test Logout
+        // Open the user menu (trigger button shows initials or user name)
+        $browser->click('button[aria-haspopup="menu"]')
+            ->waitForText('Log out')
+            ->clickLink('Log out')
+            ->waitForLocation('/login') // Fortify logs out and redirects to login or home
+            ->assertPathIs('/login');
+
+        // 3. Test Login
+        $browser->type('email', 'newbrowseruser@example.com')
+            ->type('password', 'password')
+            ->press('Log in')
+            ->waitForLocation('/dashboard')
+            ->assertPathIs('/dashboard')
+            ->assertSee('New Browser User');
+    });
+});
diff --git a/tests/Browser/AuthorizationTest.php b/tests/Browser/AuthorizationTest.php
new file mode 100644
index 0000000..a6ca13d
--- /dev/null
+++ b/tests/Browser/AuthorizationTest.php
@@ -0,0 +1,83 @@
+<?php
+
+namespace Tests\Browser;
+
+use App\Models\User;
+use App\Models\Dynamic;
+use App\Models\Ledger;
+use App\Models\Mutation;
+use Laravel\Dusk\Browser;
+use Tests\DuskTestCase;
+
+test('access control and actions are enforced for owners and participants', function () {
+    // Create database state
+    $owner = User::factory()->create([
+        'name' => 'Owner Alice',
+        'email' => 'alice-owner@example.com',
+        'password' => bcrypt('password'),
+    ]);
+
+    $participant = User::factory()->create([
+        'name' => 'Participant Bob',
+        'email' => 'bob-sub@example.com',
+        'password' => bcrypt('password'),
+    ]);
+
+    $outsider = User::factory()->create([
+        'name' => 'Outsider Charlie',
+        'email' => 'charlie-outsider@example.com',
+        'password' => bcrypt('password'),
+    ]);
+
+    $dynamic = Dynamic::create([
+        'name' => 'Private Club',
+        'rules' => 'Strict access control.',
+    ]);
+
+    $dynamic->participants()->attach($owner->id, ['role' => 'owner']);
+    $dynamic->participants()->attach($participant->id, ['role' => 'participant']);
+
+    $ledger = Ledger::create([
+        'dynamic_id' => $dynamic->id,
+        'name' => 'Rules Compliance',
+        'rules' => 'Score rules.',
+        'score' => 100,
+        'alignment' => 'neutral',
+    ]);
+
+    $this->browse(function (Browser $sessionOwner, Browser $sessionParticipant, Browser $sessionOutsider) use ($dynamic, $ledger, $owner, $participant, $outsider) {
+        
+        // 1. Test Outsider trying to access dynamic they DO NOT belong to (should be forbidden / 403)
+        $sessionOutsider->loginAs($outsider)
+            ->visit(route('dynamics.show', $dynamic))
+            ->assertSee('403') // Laravel / Inertia forbidden page
+            ->assertDontSee('Private Club');
+
+        // 2. Test Participant accessing dynamic they DO belong to (should be allowed)
+        $sessionParticipant->loginAs($participant)
+            ->visit(route('dynamics.show', $dynamic))
+            ->waitForText('Private Club')
+            ->assertSee('Private Club')
+            ->assertSee('Participant Bob');
+
+        // 3. Test Participant adding a mutation suggestion
+        $sessionParticipant->visit(route('dynamics.ledgers.show', [$dynamic, $ledger]))
+            ->waitForText('Add Mutation')
+            ->type('amount', '20')
+            ->type('description', 'Cleaned the main room')
+            ->press('Add Mutation')
+            ->waitForText('PENDING')
+            ->assertSee('PENDING') // Mutation should show up as pending
+            ->assertDontSee('Approve'); // Standard participant should NOT see approve button!
+
+        // 4. Test Owner logging in, seeing the pending suggestion, and approving it!
+        $sessionOwner->loginAs($owner)
+            ->visit(route('dynamics.ledgers.show', [$dynamic, $ledger]))
+            ->waitForText('Cleaned the main room')
+            ->assertSee('PENDING')
+            ->assertSee('Approve') // Owner should see the Approve button!
+            ->press('Approve')
+            ->waitForText('Score: 120') // Score updated from 100 to 120 after approval!
+            ->assertDontSee('PENDING'); // No longer pending!
+    });
+});