@yargram/react 1.0.2 → 1.0.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yargram/react",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
   "exports": {

package/src/components/LogWindow/LogEntryRow.tsx

@@ -1,6 +1,6 @@
-import React from 'react';
-import { Info, AlertTriangle, CircleAlert } from 'lucide-react';
-import type { LogEntry as LogEntryType, LogLevel } from './types';
+import React, { useState } from 'react';
+import { Info, AlertTriangle, CircleAlert, ChevronRight, ChevronDown } from 'lucide-react';
+import type { LogEntry as LogEntryType, LogLevel, LogMessage } from './types';
 import './LogWindow.css';
 
 type LogEntryRowProps = {
@@ -13,6 +13,52 @@ const levelIcons: Record<LogLevel, React.ComponentType<{ size?: number | string;
   error: CircleAlert,
 };
 
+function isExpandableMessage(msg: LogMessage): msg is Record<string, unknown> | unknown[] {
+  return typeof msg === 'object' && msg !== null;
+}
+
+function getMessageSummary(msg: Record<string, unknown> | unknown[]): string {
+  if (Array.isArray(msg)) return `Array (${msg.length})`;
+  return `Object (${Object.keys(msg).length} keys)`;
+}
+
+type LogEntryMessageProps = {
+  message: LogMessage;
+};
+
+function LogEntryMessage({ message }: LogEntryMessageProps) {
+  const [expanded, setExpanded] = useState(false);
+
+  if (isExpandableMessage(message)) {
+    const summary = getMessageSummary(message);
+    return (
+      <div className="logWindowEntryAccordion">
+        <button
+          type="button"
+          className="logWindowEntryAccordionHeader"
+          onClick={() => setExpanded((e) => !e)}
+          aria-expanded={expanded}
+        >
+          <span className="logWindowEntryAccordionChevron">
+            {expanded ? <ChevronDown size={14} aria-hidden /> : <ChevronRight size={14} aria-hidden />}
+          </span>
+          <span className="logWindowEntryAccordionSummary">{summary}</span>
+        </button>
+        <div
+          className={`logWindowEntryAccordionBody ${expanded ? 'logWindowEntryAccordionBodyExpanded' : ''}`}
+          aria-hidden={!expanded}
+        >
+          <div className="logWindowEntryAccordionBodyInner">
+            <pre className="logWindowEntryAccordionPre">{JSON.stringify(message, null, 2)}</pre>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  const text = typeof message === 'string' ? message : String(message);
+  return <span className="logWindowEntryMessageText">{text}</span>;
+}
 
 export function LogEntryRow({ entry }: LogEntryRowProps) {
   const levelClass = `logWindowEntry${entry.level.charAt(0).toUpperCase() + entry.level.slice(1)}` as
@@ -31,7 +77,9 @@ export function LogEntryRow({ entry }: LogEntryRowProps) {
       <span className={`logWindowEntryIcon ${iconClass}`}>
         <IconComponent size={12} />
       </span>
-      <span className="logWindowEntryMessage">{entry.message}</span>
+      <span className="logWindowEntryMessage">
+        <LogEntryMessage message={entry.message} />
+      </span>
       <span className="logWindowEntrySource">{entry.source}</span>
     </div>
   );

package/src/components/LogWindow/LogWindow.css

@@ -396,10 +396,10 @@
 
 .logWindowEntry {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   gap: 10px;
   padding: 6px 14px;
-  min-height: 28px;
+  min-height: 13px;
   color: var(--logw-text);
 }
 
@@ -457,9 +457,89 @@
 
 .logWindowEntryMessage {
   flex: 1;
-  white-space: nowrap;
+  min-width: 0;
+  margin-top: 3px;
+}
+
+.logWindowEntryMessageText {
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+/* Log entry accordion (object / array) */
+.logWindowEntryAccordion {
+  width: 100%;
+  min-width: 0;
+}
+
+.logWindowEntryAccordionHeader {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  width: 100%;
+  padding: 0;
+  margin: 0;
+  border: none;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  cursor: pointer;
+  text-align: left;
+}
+
+.logWindowEntryAccordionHeader:hover {
+  background: rgba(255, 255, 255, 0.04);
+  border-radius: 4px;
+}
+
+.logWindowEntryAccordionChevron {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: var(--logw-text-muted);
+}
+
+.logWindowEntryAccordionChevron svg {
+  width: 14px;
+  height: 14px;
+}
+
+.logWindowEntryAccordionSummary {
+  color: #ffffff;
+  font-size: 11px;
+}
+
+.logWindowEntryAccordionBody {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows 0.2s ease-out;
+}
+
+.logWindowEntryAccordionBodyExpanded {
+  grid-template-rows: 1fr;
+}
+
+.logWindowEntryAccordionBodyInner {
   overflow: hidden;
-  text-overflow: ellipsis;
+  min-height: 0;
+}
+
+.logWindowEntryAccordionPre {
+  margin: 4px 0 0 20px;
+  padding: 8px 10px;
+  font-size: 11px;
+  line-height: 1.4;
+  color: var(--logw-text);
+  background: rgba(0, 0, 0, 0.25);
+  border-radius: 4px;
+  white-space: pre-wrap;
+  word-break: break-word;
+  font-family: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, monospace;
+}
+
+.logWindowEntryAccordionBody:not(.logWindowEntryAccordionBodyExpanded) .logWindowEntryAccordionPre {
+  opacity: 0;
 }
 
 .logWindowEntrySource {

package/src/components/LogWindow/LogWindow.stories.tsx

@@ -137,12 +137,69 @@ export const ManyEntries: Story = {
   },
 };
 
+/** 表示行数を 2 行に固定。スクロールで続きを表示 */
+export const VisibleRows2: Story = {
+  args: {
+    entries: [
+      ...sampleEntries,
+      { id: '4', level: 'info', message: 'Fetching data...', source: 'useApi.ts:18' },
+      { id: '5', level: 'warn', message: 'Deprecated API used', source: 'legacy.ts:3' },
+    ],
+    visibleRows: 2,
+  },
+};
+
+/** 表示行数を 3 行に固定 */
+export const VisibleRows3: Story = {
+  args: {
+    entries: [
+      ...sampleEntries,
+      { id: '4', level: 'info', message: 'Fetching data...', source: 'useApi.ts:18' },
+    ],
+    visibleRows: 3,
+  },
+};
+
+/** 表示行数を任意の数（例: 5 行）に指定 */
+export const VisibleRows5: Story = {
+  args: {
+    entries: [
+      ...sampleEntries,
+      { id: '4', level: 'info', message: 'Fetching data...', source: 'useApi.ts:18' },
+      { id: '5', level: 'warn', message: 'Deprecated API used', source: 'legacy.ts:3' },
+      { id: '6', level: 'error', message: 'Network request failed', source: 'api.ts:92' },
+    ],
+    visibleRows: 5,
+  },
+};
+
 export const Empty: Story = {
   args: {
     entries: [],
   },
 };
 
+/** 連想配列・配列はアコーディオンで展開・縮小表示 */
+export const ObjectAndArrayMessages: Story = {
+  args: {
+    entries: [
+      { id: '1', level: 'info', message: 'Plain string message', source: 'App.tsx:1' },
+      {
+        id: '2',
+        level: 'info',
+        message: { name: 'Alice', age: 30, tags: ['admin', 'user'] },
+        source: 'App.tsx:2',
+      },
+      {
+        id: '3',
+        level: 'warn',
+        message: [{ id: 1, title: 'First' }, { id: 2, title: 'Second' }],
+        source: 'App.tsx:3',
+      },
+    ],
+  },
+};
+
 export const NetworksTab: Story = {
   args: {
     entries: sampleEntries,

package/src/components/LogWindow/LogWindow.tsx

@@ -32,6 +32,8 @@ export type LogWindowProps = {
   onTabChange?: (tab: LogWindowTab) => void;
   /** 高さ（CSS 値）。未指定時は max-height: 320px */
   height?: string | number;
+  /** 表示する行数（2, 3 など）。指定時はボディ高さを行数に合わせる。height より優先 */
+  visibleRows?: number;
   className?: string;
   /** true のときヘッダーをドラッグしてウィンドウを移動できる */
   draggable?: boolean;
@@ -56,6 +58,9 @@ export type LogWindowProps = {
 };
 
 const CLOSE_ANIMATION_MS = 200;
+/** 1行あたりの高さ（.logWindowEntry の min-height 28px + padding 6*2） */
+const LOG_ROW_HEIGHT_PX = 40;
+const LOG_PANEL_PADDING_V = 16;
 
 export function LogWindow({
   entries = [],
@@ -63,6 +68,7 @@ export function LogWindow({
   defaultTab = 'logs',
   onTabChange,
   height,
+  visibleRows,
   className = '',
   draggable = false,
   defaultPosition,
@@ -83,6 +89,8 @@ export function LogWindow({
   const closeTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
   const prevEntriesLengthRef = useRef(entries.length);
   const prevNetworkEntriesLengthRef = useRef(networkEntries.length);
+  const logsPanelRef = useRef<HTMLDivElement>(null);
+  const networksPanelRef = useRef<HTMLDivElement>(null);
   const [position, setPosition] = useState<{ x: number; y: number }>(() =>
     draggable ? defaultPosition ?? { x: 100, y: 100 } : { x: 0, y: 0 }
   );
@@ -101,6 +109,16 @@ export function LogWindow({
     prevNetworkEntriesLengthRef.current = networkEntries.length;
   }, [entries.length, networkEntries.length, activeTab]);
 
+  useEffect(() => {
+    const el = logsPanelRef.current;
+    if (el) el.scrollTop = el.scrollHeight;
+  }, [entries.length]);
+
+  useEffect(() => {
+    const el = networksPanelRef.current;
+    if (el) el.scrollTop = el.scrollHeight;
+  }, [networkEntries.length]);
+
   const handleTab = (tab: LogWindowTab) => {
     setActiveTab(tab);
     if (tab === 'logs') setUnreadLogsCount(0);
@@ -162,9 +180,10 @@ export function LogWindow({
 
   const handleExportCsv = useCallback(() => {
     const header = 'level,message,source\n';
-    const rows = entries.map((e) =>
-      [e.level, escapeCsvCell(e.message), escapeCsvCell(e.source)].join(',')
-    );
+    const rows = entries.map((e) => {
+      const msgStr = typeof e.message === 'string' ? e.message : JSON.stringify(e.message);
+      return [e.level, escapeCsvCell(msgStr), escapeCsvCell(e.source)].join(',');
+    });
     const csv = header + rows.join('\n');
     const blob = new Blob([csv], { type: 'text/csv;charset=utf-8' });
     downloadBlob(blob, `logs-${Date.now()}.csv`);
@@ -179,7 +198,12 @@ export function LogWindow({
     setExportDialogOpen(false);
   }, [entries, networkEntries]);
 
-  const bodyStyle = height != null ? { maxHeight: typeof height === 'number' ? `${height}px` : height } : undefined;
+  const bodyStyle: React.CSSProperties | undefined =
+    visibleRows != null
+      ? { maxHeight: visibleRows * LOG_ROW_HEIGHT_PX + LOG_PANEL_PADDING_V }
+      : height != null
+        ? { maxHeight: typeof height === 'number' ? `${height}px` : height }
+        : undefined;
 
   const rootStyle: React.CSSProperties | undefined = draggable
     ? {
@@ -300,12 +324,12 @@ export function LogWindow({
               transform: activeTab === 'logs' ? 'translateX(0)' : 'translateX(-50%)',
             }}
           >
-            <div className="logWindowBodyPanel">
+            <div ref={logsPanelRef} className="logWindowBodyPanel">
               {entries.map((entry) => (
                 <LogEntryRow key={entry.id} entry={entry} />
               ))}
             </div>
-            <div className="logWindowBodyPanel">
+            <div ref={networksPanelRef} className="logWindowBodyPanel">
               {networkEntries.length > 0 ? (
                 networkEntries.map((entry) => (
                   <NetworkEntryRow key={entry.id} entry={entry} />

package/src/components/LogWindow/index.ts

@@ -6,6 +6,7 @@ export { NetworkEntryRow } from './NetworkEntryRow';
 export type {
   LogEntry,
   LogLevel,
+  LogMessage,
   LogWindowTab,
   NetworkEntry,
   NetworkEntryRest,

package/src/components/LogWindow/types.ts

@@ -1,9 +1,12 @@
 export type LogLevel = 'info' | 'warn' | 'error';
 
+/** ログメッセージ（文字列のほか、連想配列・配列の場合はアコーディオンで展開表示） */
+export type LogMessage = string | Record<string, unknown> | unknown[];
+
 export type LogEntry = {
   id: string;
   level: LogLevel;
-  message: string;
+  message: LogMessage;
   source: string;
 };
 

package/src/contexts/YargramContext.tsx

@@ -21,7 +21,7 @@ import type { RestApiContextValue, GraphqlApiContextValue } from './ApiContext';
 import { PrinterProvider } from './PrinterContext';
 import { useLogWindowShortcut } from '../hooks/useLogWindowShortcut';
 import { LogWindow } from '../components/LogWindow/LogWindow';
-import type { LogEntry, NetworkEntry } from '../components/LogWindow/types';
+import type { LogEntry, LogMessage, NetworkEntry } from '../components/LogWindow/types';
 import type { Env } from '@yargram/core';
 import type {
   ApolloClient as ApolloClientType,
@@ -174,7 +174,10 @@ type YargramPrinterConfig = {
 };
 
 /** LogWindow 設定（Escape 5 回で表示） */
-type YargramLogWindowConfig = Record<string, never>;
+type YargramLogWindowConfig = {
+  /** 表示する行数（2, 3 など）。未指定時はウィンドウのデフォルト高さ */
+  visibleRows?: number;
+};
 
 /** 認証設定。本番のみログインを要求する場合は true、カスタム時はオブジェクト */
 type YargramAuthConfig =
@@ -246,6 +249,7 @@ function LogWindowGate({
   networkEntries,
   isLogWindowOpen,
   closeLogWindow,
+  logWindowConfig,
 }: {
   instanceId: string;
   defaultPosition: { x: number; y: number };
@@ -259,6 +263,7 @@ function LogWindowGate({
   networkEntries: NetworkEntry[];
   isLogWindowOpen: boolean;
   closeLogWindow: () => void;
+  logWindowConfig?: YargramLogWindowConfig;
 }) {
   if (!isLogWindowOpen || typeof document === 'undefined') {
     return null;
@@ -269,6 +274,7 @@ function LogWindowGate({
         key={instanceId}
         entries={logEntries}
         networkEntries={networkEntries}
+        visibleRows={logWindowConfig?.visibleRows}
         draggable
         animateOnOpen
         onClose={closeLogWindow}
@@ -389,17 +395,19 @@ export function YargramProvider({
 
   const wrappedPrinter = useMemo(() => {
     const base = createPrinter(env);
+    const toConsoleStr = (msg: LogMessage): string =>
+      typeof msg === 'string' ? msg : JSON.stringify(msg);
     return {
-      info: (msg: string) => {
-        base.info(msg);
+      info: (msg: LogMessage) => {
+        base.info(toConsoleStr(msg));
         addLogEntryRef.current({ level: 'info', message: msg, source: 'app' });
       },
-      warn: (msg: string) => {
-        base.warn(msg);
+      warn: (msg: LogMessage) => {
+        base.warn(toConsoleStr(msg));
         addLogEntryRef.current({ level: 'warn', message: msg, source: 'app' });
       },
-      error: (msg: string) => {
-        base.error(msg);
+      error: (msg: LogMessage) => {
+        base.error(toConsoleStr(msg));
         addLogEntryRef.current({ level: 'error', message: msg, source: 'app' });
       },
     };
@@ -624,6 +632,7 @@ export function YargramProvider({
           key={instanceId}
           entries={logEntries}
           networkEntries={networkEntries}
+          visibleRows={logWindow?.visibleRows}
           draggable
           animateOnOpen
           onClose={closeLogWindow}
@@ -657,6 +666,7 @@ export function YargramProvider({
             networkEntries={networkEntries}
             isLogWindowOpen={isLogWindowOpen}
             closeLogWindow={closeLogWindow}
+            logWindowConfig={logWindow}
           />
         </>
       ) : (