Protokoll #10621

{
    "event": "PreToolUse",
    "tool_name": "Write",
    "tool_input": {
        "file_path": "\/var\/www\/dev.campus.systemische-tools.de\/src\/View\/docs\/code-graph.php",
        "content": "<?php\n\ndeclare(strict_types=1);\n\n\/\/ @responsibility: View für Dependency-Graph-Visualisierung\n\nob_start();\n$shortPath = str_replace('\/var\/www\/dev.campus.systemische-tools.de\/', '', $file['file_path']);\n?>\n\n<nav class=\"breadcrumb\">\n    <a href=\"\/docs\/code\">Code-Analyse<\/a> &raquo;\n    <a href=\"\/docs\/code\/<?= $file['id'] ?>\"><?= htmlspecialchars($file['file_name']) ?><\/a> &raquo;\n    <span>Graph<\/span>\n<\/nav>\n\n<h1>Dependency Graph<\/h1>\n<p style=\"color: var(--text-muted); margin-bottom: 1rem;\">\n    <code><?= htmlspecialchars($fqcn) ?><\/code>\n<\/p>\n\n<div class=\"graph-legend\" style=\"display: flex; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1rem; font-size: 0.875rem;\">\n    <span><span style=\"display: inline-block; width: 12px; height: 12px; background: #6366f1; border-radius: 50%; margin-right: 0.25rem;\"><\/span> Zentral<\/span>\n    <span><span style=\"display: inline-block; width: 12px; height: 12px; background: #f59e0b; border-radius: 50%; margin-right: 0.25rem;\"><\/span> Extends<\/span>\n    <span><span style=\"display: inline-block; width: 12px; height: 12px; background: #3b82f6; border-radius: 50%; margin-right: 0.25rem;\"><\/span> Implements<\/span>\n    <span><span style=\"display: inline-block; width: 12px; height: 12px; background: #8b5cf6; border-radius: 50%; margin-right: 0.25rem;\"><\/span> Constructor<\/span>\n    <span><span style=\"display: inline-block; width: 12px; height: 12px; background: #10b981; border-radius: 50%; margin-right: 0.25rem;\"><\/span> Dependent<\/span>\n<\/div>\n\n<div id=\"graph-container\" style=\"width: 100%; height: 600px; background: var(--bg-secondary); border-radius: 8px; overflow: hidden;\"><\/div>\n\n<div style=\"margin-top: 1.5rem;\">\n    <a href=\"\/docs\/code\/<?= $file['id'] ?>\" class=\"btn btn--secondary\">&larr; Zurück zu Details<\/a>\n<\/div>\n\n<script src=\"https:\/\/d3js.org\/d3.v7.min.js\"><\/script>\n<script>\n(function() {\n    const container = document.getElementById('graph-container');\n    const width = container.clientWidth;\n    const height = container.clientHeight;\n\n    const colors = {\n        center: '#6366f1',\n        extends: '#f59e0b',\n        implements: '#3b82f6',\n        constructor: '#8b5cf6',\n        dependent: '#10b981',\n        use: '#94a3b8'\n    };\n\n    const linkColors = {\n        extends: '#f59e0b',\n        implements: '#3b82f6',\n        constructor: '#8b5cf6',\n        use: '#94a3b8'\n    };\n\n    fetch('\/docs\/code\/<?= $file['id'] ?>\/graph-data')\n        .then(r => r.json())\n        .then(data => {\n            const svg = d3.select('#graph-container')\n                .append('svg')\n                .attr('width', width)\n                .attr('height', height);\n\n            \/\/ Arrow markers for directed edges\n            svg.append('defs').selectAll('marker')\n                .data(['extends', 'implements', 'constructor', 'use'])\n                .enter().append('marker')\n                .attr('id', d => 'arrow-' + d)\n                .attr('viewBox', '0 -5 10 10')\n                .attr('refX', 20)\n                .attr('refY', 0)\n                .attr('markerWidth', 6)\n                .attr('markerHeight', 6)\n                .attr('orient', 'auto')\n                .append('path')\n                .attr('d', 'M0,-5L10,0L0,5')\n                .attr('fill', d => linkColors[d] || '#94a3b8');\n\n            const simulation = d3.forceSimulation(data.nodes)\n                .force('link', d3.forceLink(data.links).id(d => d.id).distance(120))\n                .force('charge', d3.forceManyBody().strength(-400))\n                .force('center', d3.forceCenter(width \/ 2, height \/ 2))\n                .force('collision', d3.forceCollide().radius(50));\n\n            const link = svg.append('g')\n                .selectAll('line')\n                .data(data.links)\n                .enter().append('line')\n                .attr('stroke', d => linkColors[d.type] || '#94a3b8')\n                .attr('stroke-width', 2)\n                .attr('stroke-opacity', 0.6)\n                .attr('marker-end', d => 'url(#arrow-' + d.type + ')');\n\n            const node = svg.append('g')\n                .selectAll('g')\n                .data(data.nodes)\n                .enter().append('g')\n                .attr('cursor', d => d.fileId ? 'pointer' : 'default')\n                .on('click', (event, d) => {\n                    if (d.fileId) {\n                        window.location.href = '\/docs\/code\/' + d.fileId;\n                    }\n                })\n                .call(d3.drag()\n                    .on('start', dragstarted)\n                    .on('drag', dragged)\n                    .on('end', dragended));\n\n            node.append('circle')\n                .attr('r', d => d.type === 'center' ? 20 : 14)\n                .attr('fill', d => colors[d.type] || '#94a3b8')\n                .attr('stroke', '#fff')\n                .attr('stroke-width', 2);\n\n            node.append('text')\n                .text(d => d.label)\n                .attr('x', 0)\n                .attr('y', d => d.type === 'center' ? 35 : 28)\n                .attr('text-anchor', 'middle')\n                .attr('fill', 'var(--text-primary)')\n                .attr('font-size', d => d.type === 'center' ? '12px' : '10px')\n                .attr('font-weight', d => d.type === 'center' ? 'bold' : 'normal');\n\n            node.append('title')\n                .text(d => d.id);\n\n            simulation.on('tick', () => {\n                link\n                    .attr('x1', d => d.source.x)\n                    .attr('y1', d => d.source.y)\n                    .attr('x2', d => d.target.x)\n                    .attr('y2', d => d.target.y);\n\n                node.attr('transform', d => `translate(${d.x},${d.y})`);\n            });\n\n            function dragstarted(event) {\n                if (!event.active) simulation.alphaTarget(0.3).restart();\n                event.subject.fx = event.subject.x;\n                event.subject.fy = event.subject.y;\n            }\n\n            function dragged(event) {\n                event.subject.fx = event.x;\n                event.subject.fy = event.y;\n            }\n\n            function dragended(event) {\n                if (!event.active) simulation.alphaTarget(0);\n                event.subject.fx = null;\n                event.subject.fy = null;\n            }\n        })\n        .catch(err => {\n            container.innerHTML = '<p style=\"padding: 2rem; color: var(--text-muted);\">Fehler beim Laden des Graphen: ' + err.message + '<\/p>';\n        });\n})();\n<\/script>\n\n<?php $content = ob_get_clean(); ?>\n<?php require VIEW_PATH . '\/layout.php'; ?>\n"
    }
}

{
    "tool_response": {
        "type": "create",
        "filePath": "\/var\/www\/dev.campus.systemische-tools.de\/src\/View\/docs\/code-graph.php",
        "content": "<?php\n\ndeclare(strict_types=1);\n\n\/\/ @responsibility: View für Dependency-Graph-Visualisierung\n\nob_start();\n$shortPath = str_replace('\/var\/www\/dev.campus.systemische-tools.de\/', '', $file['file_path']);\n?>\n\n<nav class=\"breadcrumb\">\n    <a href=\"\/docs\/code\">Code-Analyse<\/a> &raquo;\n    <a href=\"\/docs\/code\/<?= $file['id'] ?>\"><?= htmlspecialchars($file['file_name']) ?><\/a> &raquo;\n    <span>Graph<\/span>\n<\/nav>\n\n<h1>Dependency Graph<\/h1>\n<p style=\"color: var(--text-muted); margin-bottom: 1rem;\">\n    <code><?= htmlspecialchars($fqcn) ?><\/code>\n<\/p>\n\n<div class=\"graph-legend\" style=\"display: flex; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1rem; font-size: 0.875rem;\">\n    <span><span style=\"display: inline-block; width: 12px; height: 12px; background: #6366f1; border-radius: 50%; margin-right: 0.25rem;\"><\/span> Zentral<\/span>\n    <span><span style=\"display: inline-block; width: 12px; height: 12px; background: #f59e0b; border-radius: 50%; margin-right: 0.25rem;\"><\/span> Extends<\/span>\n    <span><span style=\"display: inline-block; width: 12px; height: 12px; background: #3b82f6; border-radius: 50%; margin-right: 0.25rem;\"><\/span> Implements<\/span>\n    <span><span style=\"display: inline-block; width: 12px; height: 12px; background: #8b5cf6; border-radius: 50%; margin-right: 0.25rem;\"><\/span> Constructor<\/span>\n    <span><span style=\"display: inline-block; width: 12px; height: 12px; background: #10b981; border-radius: 50%; margin-right: 0.25rem;\"><\/span> Dependent<\/span>\n<\/div>\n\n<div id=\"graph-container\" style=\"width: 100%; height: 600px; background: var(--bg-secondary); border-radius: 8px; overflow: hidden;\"><\/div>\n\n<div style=\"margin-top: 1.5rem;\">\n    <a href=\"\/docs\/code\/<?= $file['id'] ?>\" class=\"btn btn--secondary\">&larr; Zurück zu Details<\/a>\n<\/div>\n\n<script src=\"https:\/\/d3js.org\/d3.v7.min.js\"><\/script>\n<script>\n(function() {\n    const container = document.getElementById('graph-container');\n    const width = container.clientWidth;\n    const height = container.clientHeight;\n\n    const colors = {\n        center: '#6366f1',\n        extends: '#f59e0b',\n        implements: '#3b82f6',\n        constructor: '#8b5cf6',\n        dependent: '#10b981',\n        use: '#94a3b8'\n    };\n\n    const linkColors = {\n        extends: '#f59e0b',\n        implements: '#3b82f6',\n        constructor: '#8b5cf6',\n        use: '#94a3b8'\n    };\n\n    fetch('\/docs\/code\/<?= $file['id'] ?>\/graph-data')\n        .then(r => r.json())\n        .then(data => {\n            const svg = d3.select('#graph-container')\n                .append('svg')\n                .attr('width', width)\n                .attr('height', height);\n\n            \/\/ Arrow markers for directed edges\n            svg.append('defs').selectAll('marker')\n                .data(['extends', 'implements', 'constructor', 'use'])\n                .enter().append('marker')\n                .attr('id', d => 'arrow-' + d)\n                .attr('viewBox', '0 -5 10 10')\n                .attr('refX', 20)\n                .attr('refY', 0)\n                .attr('markerWidth', 6)\n                .attr('markerHeight', 6)\n                .attr('orient', 'auto')\n                .append('path')\n                .attr('d', 'M0,-5L10,0L0,5')\n                .attr('fill', d => linkColors[d] || '#94a3b8');\n\n            const simulation = d3.forceSimulation(data.nodes)\n                .force('link', d3.forceLink(data.links).id(d => d.id).distance(120))\n                .force('charge', d3.forceManyBody().strength(-400))\n                .force('center', d3.forceCenter(width \/ 2, height \/ 2))\n                .force('collision', d3.forceCollide().radius(50));\n\n            const link = svg.append('g')\n                .selectAll('line')\n                .data(data.links)\n                .enter().append('line')\n                .attr('stroke', d => linkColors[d.type] || '#94a3b8')\n                .attr('stroke-width', 2)\n                .attr('stroke-opacity', 0.6)\n                .attr('marker-end', d => 'url(#arrow-' + d.type + ')');\n\n            const node = svg.append('g')\n                .selectAll('g')\n                .data(data.nodes)\n                .enter().append('g')\n                .attr('cursor', d => d.fileId ? 'pointer' : 'default')\n                .on('click', (event, d) => {\n                    if (d.fileId) {\n                        window.location.href = '\/docs\/code\/' + d.fileId;\n                    }\n                })\n                .call(d3.drag()\n                    .on('start', dragstarted)\n                    .on('drag', dragged)\n                    .on('end', dragended));\n\n            node.append('circle')\n                .attr('r', d => d.type === 'center' ? 20 : 14)\n                .attr('fill', d => colors[d.type] || '#94a3b8')\n                .attr('stroke', '#fff')\n                .attr('stroke-width', 2);\n\n            node.append('text')\n                .text(d => d.label)\n                .attr('x', 0)\n                .attr('y', d => d.type === 'center' ? 35 : 28)\n                .attr('text-anchor', 'middle')\n                .attr('fill', 'var(--text-primary)')\n                .attr('font-size', d => d.type === 'center' ? '12px' : '10px')\n                .attr('font-weight', d => d.type === 'center' ? 'bold' : 'normal');\n\n            node.append('title')\n                .text(d => d.id);\n\n            simulation.on('tick', () => {\n                link\n                    .attr('x1', d => d.source.x)\n                    .attr('y1', d => d.source.y)\n                    .attr('x2', d => d.target.x)\n                    .attr('y2', d => d.target.y);\n\n                node.attr('transform', d => `translate(${d.x},${d.y})`);\n            });\n\n            function dragstarted(event) {\n                if (!event.active) simulation.alphaTarget(0.3).restart();\n                event.subject.fx = event.subject.x;\n                event.subject.fy = event.subject.y;\n            }\n\n            function dragged(event) {\n                event.subject.fx = event.x;\n                event.subject.fy = event.y;\n            }\n\n            function dragended(event) {\n                if (!event.active) simulation.alphaTarget(0);\n                event.subject.fx = null;\n                event.subject.fy = null;\n            }\n        })\n        .catch(err => {\n            container.innerHTML = '<p style=\"padding: 2rem; color: var(--text-muted);\">Fehler beim Laden des Graphen: ' + err.message + '<\/p>';\n        });\n})();\n<\/script>\n\n<?php $content = ob_get_clean(); ?>\n<?php require VIEW_PATH . '\/layout.php'; ?>\n",
        "structuredPatch": [],
        "originalFile": null
    }
}