Phase 10M.2: Word Companion Authentication and Tab Refinement

PlotLine/Views/WordCompanionHost/Index.cshtml

@@ -17,18 +17,31 @@
         <header class="word-companion-header">
             <div>
                 <h1>PlotDirector</h1>
-                <p class="word-companion-status" data-connection-status>@statusText</p>
+                @if (Model.IsAuthenticated)
+                {
+                    <p class="word-companion-status" data-connection-status>@statusText</p>
+                }
             </div>
             @if (Model.IsAuthenticated)
             {
                 <p class="word-companion-user">Signed in as @Model.DisplayName</p>
             }
-            else
-            {
-                <a class="word-companion-sign-in" href="@Model.LoginUrl" target="_top">Sign in</a>
-            }
         </header>
 
+        @if (!Model.IsAuthenticated)
+        {
+            <section class="word-companion-signed-out" aria-label="Sign in">
+                <p>Sign in to access your PlotDirector projects and manuscript tools.</p>
+                <ul>
+                    <li>Scene sync</li>
+                    <li>Structure sync</li>
+                    <li>Companion tools</li>
+                </ul>
+                <a class="word-companion-sign-in word-companion-sign-in-primary" href="@Model.LoginUrl" target="_top">Sign In</a>
+            </section>
+        }
+        else
+        {
         <nav class="word-companion-tabs" aria-label="Companion sections">
             <button type="button" class="is-active" data-tab-button="scene" aria-selected="true">Scene</button>
             <button type="button" data-tab-button="links" aria-selected="false">Links</button>
@@ -417,6 +430,7 @@
                 </div>
             </form>
         </dialog>
+        }
     </main>
     <script src="~/js/word-companion-host.js" asp-append-version="true"></script>
 </body>

PlotLine/wwwroot/css/word-companion.css

@@ -77,6 +77,7 @@ body {
 
 .word-companion-sign-in {
   display: inline-flex;
+  align-items: center;
   justify-content: center;
   width: fit-content;
   border: 1px solid var(--companion-accent);
@@ -89,49 +90,85 @@ body {
   text-decoration: none;
 }
 
+.word-companion-signed-out {
+  display: grid;
+  gap: 12px;
+  border: 1px solid var(--companion-line);
+  border-radius: 10px;
+  padding: 16px;
+  background: var(--companion-panel);
+  box-shadow: 0 2px 8px rgba(74, 50, 31, 0.08);
+}
+
+.word-companion-signed-out p {
+  margin: 0;
+  color: var(--companion-ink);
+  font-size: 0.94rem;
+  line-height: 1.35;
+}
+
+.word-companion-signed-out ul {
+  display: grid;
+  gap: 5px;
+  margin: 0;
+  padding-left: 18px;
+  color: var(--companion-muted);
+  font-size: 0.88rem;
+}
+
+.word-companion-sign-in-primary {
+  width: 100%;
+  min-height: 36px;
+  border-radius: 8px;
+  font-size: 0.9rem;
+}
+
 .word-companion-tabs {
-  display: flex;
+  display: grid;
-  flex-wrap: wrap;
+  grid-template-columns: repeat(4, minmax(0, 1fr));
-  gap: 4px;
+  gap: 3px;
   border: 1px solid var(--companion-line);
   border-radius: 9px;
-  padding: 4px;
+  padding: 3px;
   background: #fff7eb;
   box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.75);
 }
 
 .word-companion-tabs button {
-  flex: 1 1 70px;
   min-width: 0;
-  min-height: 29px;
+  height: 28px;
-  border: 0;
+  min-height: 28px;
+  border: 1px solid transparent;
   border-radius: 7px;
   background: transparent;
   color: var(--companion-muted);
   font: inherit;
-  font-size: 0.76rem;
+  font-size: 0.68rem;
-  font-weight: 800;
+  font-weight: 700;
   line-height: 1;
-  padding: 0 7px;
+  padding: 0 4px;
+  white-space: nowrap;
 }
 
 .word-companion-tabs button.is-active {
-  background: linear-gradient(180deg, #7b5432 0%, var(--companion-accent-dark) 100%);
+  border-color: rgba(111, 75, 45, 0.3);
-  color: #fff9ef;
+  background: var(--companion-soft-strong);
-  box-shadow: 0 1px 3px rgba(74, 50, 31, 0.18);
+  color: var(--companion-accent-dark);
+  font-weight: 900;
+  box-shadow: none;
 }
 
 .word-companion-tab-panel {
   display: grid;
-  gap: 10px;
+  gap: 8px;
 }
 
 .word-companion-section {
   display: grid;
-  gap: 8px;
+  gap: 7px;
   border: 1px solid var(--companion-line);
   border-radius: 8px;
-  padding: 10px;
+  padding: 9px;
   background: var(--companion-panel);
   box-shadow: 0 1px 2px rgba(74, 50, 31, 0.05);
 }
@@ -189,14 +226,14 @@ body {
 }
 
 .word-companion-section-header button {
-  min-height: 29px;
+  min-height: 28px;
   border: 1px solid var(--companion-accent);
   border-radius: 6px;
-  padding: 5px 8px;
+  padding: 4px 7px;
   background: var(--companion-accent);
   color: #fff9ef;
   font: inherit;
-  font-size: 0.76rem;
+  font-size: 0.74rem;
   font-weight: 700;
 }
 
@@ -214,14 +251,14 @@ body {
 }
 
 .word-companion-actions button {
-  min-height: 33px;
+  min-height: 31px;
   border: 1px solid var(--companion-accent);
   border-radius: 6px;
   padding: 6px 8px;
   background: #fffdf8;
   color: var(--companion-accent-dark);
   font: inherit;
-  font-size: 0.82rem;
+  font-size: 0.8rem;
   font-weight: 800;
 }
 
@@ -230,6 +267,13 @@ body {
   color: #fff9ef;
 }
 
+.word-companion-link-groups .word-companion-section-header button,
+.word-companion-structure-preview .word-companion-section-header button {
+  min-height: 27px;
+  padding: 4px 7px;
+  font-size: 0.72rem;
+}
+
 .word-companion-actions button:disabled {
   border-color: var(--companion-line);
   background: var(--companion-soft);
@@ -367,7 +411,13 @@ body {
 .word-companion-resolve-diagnostics {
   padding-top: 4px;
   grid-template-columns: repeat(2, minmax(0, 1fr));
-  gap: 6px;
+  gap: 5px 7px;
+}
+
+.word-companion-resolve-diagnostics div {
+  min-width: 0;
+  border-bottom: 1px solid rgba(225, 211, 191, 0.6);
+  padding-bottom: 4px;
 }
 
 .word-companion-resolve-diagnostics strong {