Protokoll #11777

{
    "event": "PreToolUse",
    "tool_name": "Edit",
    "tool_input": {
        "file_path": "\/var\/www\/dev.campus.systemische-tools.de\/src\/View\/docs\/code-graph-global.php",
        "old_string": "            document.getElementById('graph-stats').textContent =\n                `${data.stats.nodes} Klassen | ${data.stats.links} Beziehungen | ${data.stats.namespaces} Namespaces`;",
        "new_string": "            \/\/ Count by language\n            const langCounts = { php: 0, py: 0, js: 0 };\n            data.nodes.forEach(n => {\n                const ext = n.extension || 'php';\n                if (langCounts[ext] !== undefined) langCounts[ext]++;\n            });\n\n            document.getElementById('graph-stats').textContent =\n                `${data.stats.nodes} Klassen | ${data.stats.links} Beziehungen | PHP: ${langCounts.php} | Python: ${langCounts.py} | JS: ${langCounts.js}`;"
    }
}

{
    "tool_response": {
        "filePath": "\/var\/www\/dev.campus.systemische-tools.de\/src\/View\/docs\/code-graph-global.php",
        "oldString": "            document.getElementById('graph-stats').textContent =\n                `${data.stats.nodes} Klassen | ${data.stats.links} Beziehungen | ${data.stats.namespaces} Namespaces`;",
        "newString": "            \/\/ Count by language\n            const langCounts = { php: 0, py: 0, js: 0 };\n            data.nodes.forEach(n => {\n                const ext = n.extension || 'php';\n                if (langCounts[ext] !== undefined) langCounts[ext]++;\n            });\n\n            document.getElementById('graph-stats').textContent =\n                `${data.stats.nodes} Klassen | ${data.stats.links} Beziehungen | PHP: ${langCounts.php} | Python: ${langCounts.py} | JS: ${langCounts.js}`;",
        "originalFile": "<?php\n\ndeclare(strict_types=1);\n\n\/\/ @responsibility: View für globalen Projekt-Dependency-Graph\n\nob_start();\n?>\n<link rel=\"stylesheet\" href=\"\/css\/graph.css\">\n\n<nav class=\"breadcrumb\">\n    <a href=\"\/docs\/code\">Code-Analyse<\/a> &raquo;\n    <span>Projekt-Graph<\/span>\n<\/nav>\n\n<h1>Projekt Dependency Graph<\/h1>\n<p class=\"graph-stats\">Alle Dependency-Beziehungen im Projekt (nur interne Klassen)<\/p>\n\n<div class=\"graph-controls\">\n    <div class=\"graph-legend\">\n        <span class=\"graph-legend-item\"><span class=\"graph-legend-node graph-node-php\"><\/span> PHP<\/span>\n        <span class=\"graph-legend-item\"><span class=\"graph-legend-node graph-node-python\"><\/span> Python<\/span>\n        <span class=\"graph-legend-item\"><span class=\"graph-legend-node graph-node-js\"><\/span> JavaScript<\/span>\n        <span class=\"graph-legend-item graph-legend-separator\"><span class=\"graph-legend-link graph-link-extends\"><\/span> extends<\/span>\n        <span class=\"graph-legend-item\"><span class=\"graph-legend-link graph-link-implements\"><\/span> implements<\/span>\n        <span class=\"graph-legend-item\"><span class=\"graph-legend-link graph-link-constructor\"><\/span> constructor<\/span>\n        <span class=\"graph-legend-item\"><span class=\"graph-legend-link graph-link-use\"><\/span> use\/import<\/span>\n    <\/div>\n    <div class=\"graph-filters\">\n        <label for=\"lang-filter\" class=\"graph-filter-label\">Sprache:<\/label>\n        <select id=\"lang-filter\" class=\"graph-filter-select\">\n            <option value=\"\">Alle<\/option>\n            <option value=\"php\">PHP<\/option>\n            <option value=\"py\">Python<\/option>\n            <option value=\"js\">JavaScript<\/option>\n        <\/select>\n        <label for=\"dep-type-filter\" class=\"graph-filter-label\">Typ:<\/label>\n        <select id=\"dep-type-filter\" class=\"graph-filter-select\">\n            <option value=\"\">Alle<\/option>\n            <option value=\"extends\">extends<\/option>\n            <option value=\"implements\">implements<\/option>\n            <option value=\"constructor\">constructor<\/option>\n            <option value=\"use\">use<\/option>\n            <option value=\"trait\">trait<\/option>\n        <\/select>\n        <label for=\"namespace-filter\" class=\"graph-filter-label\">Namespace:<\/label>\n        <select id=\"namespace-filter\" class=\"graph-filter-select\">\n            <option value=\"\">Alle<\/option>\n        <\/select>\n        <button id=\"reset-zoom\" class=\"btn btn--secondary graph-reset-btn\">Reset Zoom<\/button>\n    <\/div>\n<\/div>\n\n<div id=\"graph-stats\" class=\"graph-stats\"><\/div>\n\n<div id=\"graph-container\" class=\"graph-container\"><\/div>\n\n<div class=\"graph-back-link\">\n    <a href=\"\/docs\/code\" class=\"btn btn--secondary\">&larr; Zurück zur Übersicht<\/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    \/\/ Language-based colors\n    const langColors = {\n        php: '#6366f1',      \/\/ Indigo\n        py: '#10b981',       \/\/ Emerald (Python green)\n        js: '#f59e0b'        \/\/ Amber (JavaScript yellow)\n    };\n\n    const linkColors = {\n        extends: '#f59e0b',\n        implements: '#3b82f6',\n        constructor: '#8b5cf6',\n        use: '#94a3b8',\n        trait: '#14b8a6'\n    };\n\n    container.innerHTML = '<div class=\"graph-loading\">Lade Graph-Daten...<\/div>';\n\n    fetch('\/docs\/code\/graph-data')\n        .then(r => r.json())\n        .then(data => {\n            container.innerHTML = '';\n\n            document.getElementById('graph-stats').textContent =\n                `${data.stats.nodes} Klassen | ${data.stats.links} Beziehungen | ${data.stats.namespaces} Namespaces`;\n\n            const namespaces = [...new Set(data.nodes.map(n => n.namespace))].sort();\n            const filter = document.getElementById('namespace-filter');\n            namespaces.forEach(ns => {\n                const opt = document.createElement('option');\n                opt.value = ns;\n                opt.textContent = ns;\n                filter.appendChild(opt);\n            });\n\n            const namespaceGroups = {};\n            data.nodes.forEach((node, i) => {\n                const ns = node.namespace || 'global';\n                if (!namespaceGroups[ns]) namespaceGroups[ns] = [];\n                namespaceGroups[ns].push(node);\n            });\n\n            const nsKeys = Object.keys(namespaceGroups).sort();\n            const nsCount = nsKeys.length;\n            const centerX = width \/ 2;\n            const centerY = height \/ 2;\n            const nsRadius = Math.min(width, height) * 0.35;\n\n            nsKeys.forEach((ns, nsIndex) => {\n                const nodes = namespaceGroups[ns];\n                const nsAngle = (2 * Math.PI * nsIndex) \/ nsCount - Math.PI \/ 2;\n                const nsCenterX = centerX + nsRadius * Math.cos(nsAngle);\n                const nsCenterY = centerY + nsRadius * Math.sin(nsAngle);\n\n                const nodeCount = nodes.length;\n                const nodeRadius = Math.min(80, 20 + nodeCount * 5);\n\n                nodes.forEach((node, nodeIndex) => {\n                    if (nodeCount === 1) {\n                        node.x = nsCenterX;\n                        node.y = nsCenterY;\n                    } else {\n                        const nodeAngle = (2 * Math.PI * nodeIndex) \/ nodeCount;\n                        node.x = nsCenterX + nodeRadius * Math.cos(nodeAngle);\n                        node.y = nsCenterY + nodeRadius * Math.sin(nodeAngle);\n                    }\n                });\n            });\n\n            const nodeIndex = {};\n            data.nodes.forEach((n, i) => nodeIndex[n.id] = i);\n\n            data.links.forEach(link => {\n                if (typeof link.source === 'number') {\n                    link.sourceNode = data.nodes[link.source];\n                    link.targetNode = data.nodes[link.target];\n                }\n            });\n\n            const svg = d3.select('#graph-container')\n                .append('svg')\n                .attr('width', width)\n                .attr('height', height);\n\n            const g = svg.append('g');\n\n            const zoom = d3.zoom()\n                .scaleExtent([0.1, 4])\n                .on('zoom', (event) => {\n                    g.attr('transform', event.transform);\n                });\n\n            svg.call(zoom);\n\n            document.getElementById('reset-zoom').addEventListener('click', () => {\n                svg.transition().duration(300).call(zoom.transform, d3.zoomIdentity);\n            });\n\n            svg.append('defs').selectAll('marker')\n                .data(['extends', 'implements', 'constructor', 'use', 'trait'])\n                .enter().append('marker')\n                .attr('id', d => 'arrow-global-' + d)\n                .attr('viewBox', '0 -5 10 10')\n                .attr('refX', 15)\n                .attr('refY', 0)\n                .attr('markerWidth', 5)\n                .attr('markerHeight', 5)\n                .attr('orient', 'auto')\n                .append('path')\n                .attr('d', 'M0,-5L10,0L0,5')\n                .attr('fill', d => linkColors[d]);\n\n            const nsLabels = g.append('g').attr('class', 'ns-labels');\n            nsKeys.forEach((ns, nsIndex) => {\n                const nsAngle = (2 * Math.PI * nsIndex) \/ nsCount - Math.PI \/ 2;\n                const labelRadius = nsRadius + 100;\n                const labelX = centerX + labelRadius * Math.cos(nsAngle);\n                const labelY = centerY + labelRadius * Math.sin(nsAngle);\n\n                nsLabels.append('text')\n                    .attr('x', labelX)\n                    .attr('y', labelY)\n                    .attr('text-anchor', 'middle')\n                    .attr('fill', 'var(--text-muted)')\n                    .attr('font-size', '10px')\n                    .attr('font-weight', 'bold')\n                    .text(ns.split('\\\\').pop());\n            });\n\n            const link = g.append('g')\n                .selectAll('line')\n                .data(data.links)\n                .enter().append('line')\n                .attr('class', 'graph-link')\n                .attr('data-type', d => d.type)\n                .attr('stroke', d => linkColors[d.type] || '#94a3b8')\n                .attr('stroke-width', 1.5)\n                .attr('stroke-opacity', 0.4)\n                .attr('marker-end', d => 'url(#arrow-global-' + d.type + ')')\n                .attr('x1', d => data.nodes[d.source].x)\n                .attr('y1', d => data.nodes[d.source].y)\n                .attr('x2', d => data.nodes[d.target].x)\n                .attr('y2', d => data.nodes[d.target].y);\n\n            const node = g.append('g')\n                .selectAll('g')\n                .data(data.nodes)\n                .enter().append('g')\n                .attr('class', 'graph-node')\n                .attr('data-namespace', d => d.namespace)\n                .attr('transform', d => `translate(${d.x},${d.y})`)\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\n            node.append('circle')\n                .attr('r', 8)\n                .attr('fill', d => colors[d.type] || colors.class)\n                .attr('stroke', '#fff')\n                .attr('stroke-width', 1.5);\n\n            node.append('text')\n                .text(d => d.label)\n                .attr('x', 0)\n                .attr('y', 20)\n                .attr('text-anchor', 'middle')\n                .attr('fill', 'var(--text-primary)')\n                .attr('font-size', '8px');\n\n            node.append('title')\n                .text(d => d.id);\n\n            const depTypeFilter = document.getElementById('dep-type-filter');\n\n            function applyFilters() {\n                const selectedNs = filter.value;\n                const selectedType = depTypeFilter.value;\n\n                co... [TRUNCATED-8292b258d48ff0b8]",
        "structuredPatch": [
            {
                "oldStart": 88,
                "oldLines": 8,
                "newStart": 88,
                "newLines": 15,
                "lines": [
                    "         .then(data => {",
                    "             container.innerHTML = '';",
                    " ",
                    "+            \/\/ Count by language",
                    "+            const langCounts = { php: 0, py: 0, js: 0 };",
                    "+            data.nodes.forEach(n => {",
                    "+                const ext = n.extension || 'php';",
                    "+                if (langCounts[ext] !== undefined) langCounts[ext]++;",
                    "+            });",
                    "+",
                    "             document.getElementById('graph-stats').textContent =",
                    "-                `${data.stats.nodes} Klassen | ${data.stats.links} Beziehungen | ${data.stats.namespaces} Namespaces`;",
                    "+                `${data.stats.nodes} Klassen | ${data.stats.links} Beziehungen | PHP: ${langCounts.php} | Python: ${langCounts.py} | JS: ${langCounts.js}`;",
                    " ",
                    "             const namespaces = [...new Set(data.nodes.map(n => n.namespace))].sort();",
                    "             const filter = document.getElementById('namespace-filter');"
                ]
            }
        ],
        "userModified": false,
        "replaceAll": false
    }
}